<!doctype html> <html> <head> <meta charset="utf-8"> <title>块元素与行内元素</title> <style> p{ background-color:pink;} span{ background-color:yellow;} i{ background-color:#CFF;} div{ background-color:#FFC;} </style> </head> <body> <p>p标记——块元素</p> <span>span标记——行内元素</span> <i>i标记——行内元素</i> <div >div标记——块元素</div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>块元素与行内元素</title> <style> p{ background-color:pink;} span{ background-color:yellow; display:block;} i{ background-color:#CFF;} div{ background-color:#FFC; display:inline;} </style> </head> <body> <p>p标记——块元素</p> <span>span标记——行内元素</span> <i>i标记——行内元素</i> <div >div标记——块元素</div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>静态定位</title> <style> p{ text-align:center; border:5px solid blue; width:100px; /*设定框的宽度*/ margin:15px; /*外边距四周5个像素*/ } </style> </head> <body> <p>第一段文字</p> <p>第二段文字</p> <p>第三段文字</p> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>相对定位</title> <style> p{ text-align:center; border:5px solid blue; width:100px; /*设定框的宽度*/ margin:15px; /*外边距四周5个像素*/ } p.relative{ position:relative; top:10px; left:40px; background:black; color:white; } </style> </head> <body> <div> <p>第一段文字</p> <p class="relative">第二段文字</p> <p>第三段文字</p> </div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>绝对定位</title> <style> #box{ height:200px; width:300px; margin:0 auto; background:grey;position:relative; } #box p{ text-align:center; /*设定文本居中对齐*/ border:5px solid blue; /*设定边框线5像素、实心线，蓝色*/ width:100px; /*设定宽度值100像素*/ margin:15px; /*设定外边距15个像素*/ background:pink; } #box p.absolute{ background:yellow; position:absolute; top:10px; left:40px;} </style> </head> <body> <div id="box"> <p>第一段文字</p> <p class="absolute">第二段文字</p> <p>第三段文字</p> </div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>层次定位</title> <style> div{ height:100px; width:100px; position:absolute;top:0px; left:0px; background:yellow; z-index:2; } #two { top:20px; left:20px; background:grey; z-index:1;} #three{top:40px; left:40px; background:pink;z-index:0;} </style> </head> <body> <div id="one">1</div> <div id="two">2</div> <div id="three">3</div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>浮动</title> <style> *{ margin:0px; padding:0px; } html,body{ width:100%; height:100%; background:#FFC; } div.container{ width:80%; height:100%; background:#CF3; margin:0 auto; } div.header,div.footer{ /*定义主页的页眉和页脚*/ color:white; background-color:gray; clear:left; text-align:center; height:80px; line-height:80px; } div.middle{ background-color:pink; height:502px; } div.left,div.content,div.right{ float:left; background:yellow; height:100%; width:70%; } div.left,div.right{ background-color:#99F; width:15%; } </style> </head> <body> <div class="container"> <div class="header"> <h1 class="header">数学与计算机学院</h1> </div> <div class="middle"> <div class="left"> <p> Web程序设计基础——HTML、CSS、Javascript</p> </div> <div class="content"> <h2>CSS 样式表的作用</h2> <p>http://www.whpu.edu.cn/div_css</p> <p>希望认真学习CSS样式表，制作精彩的网页！</p> </div> <div class="right"> <p> Web程序设计课程实验显示</p> </div> </div> <div class="footer"> 版权：2019 艺丹小组 </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>对象的隐藏</title> <style> *{margin:0px; padding:0px;} .c1 ul{ list-style: none; } .c1 li{ border:1px black solid; background-color:yellow; font-size:18px; width:60px; height:30px; line-height:30px; text-align: center; float:left; } .c1 ul li.setHiddin{ display:none; } </style> </head> <body> <div class="c1"> <ul> <li><a href="#">首页</a></li> <li class="setHiddin"><a href="#">新闻</a></li> <li><a href="#">娱乐</a></li> <li><a href="#">科技</a></li> <li><a href="#">财经</a></li> </ul> </div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>溢出</title> <style> .mainBox { width:100px; height:100px; background:pink; position:relative; overflow:hidden; } .subBox{ width:200px; height:50px; background:yellow; position:absolute; top:20px; left:20px; } </style> </head> <body> <div class="mainBox"> <div class="subBox"></div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>双飞翼布局</title> <style> * { margin: 0; padding: 0; } div { color: #fff; height: 200px; } .center { float: left; width: 100%; } .center .content { margin: 0 210px 0 110px; background: orange; } .left { float: left; width: 100px; margin-left: -100%; background: green; } .right { float: left; margin-left: -200px; width: 200px; background: green; } </style> </head> <body> <div class="center"> <div class="content">center</div> </div> <div class="left">left</div> <div class="right">right</div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>水平垂直居中</title> <style> div { width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; background: orange; } </style> </head> <body> <div></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>边框样式</title> <style> p{ border: medium double rgb(250,0,255) } p.soliddouble { border-width:10px; border-style: solid double; border-top-color:green; } </style> </head> <body> <p>文档中的一些文字</p> <p class="soliddouble">文档中的一些文字</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>边框样式</title> <style> div div{ float:left; margin:10px;} #box{ width:600px;} /*正方形*/ .Square { width: 100px; height: 100px; background: #669; } /*矩形*/ .rectangle { width: 200px; height: 100px; background: #669; } /*梯形*/ .trapezoid { border-bottom: 100px solid #669; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; } /*平行四边形*/ .parallelogram { width: 150px; height: 100px; transform: skew(-20deg); background: #669; margin-left:20px; } /*三角形*/ .triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #669; } .circle-circle { width: 100px; height: 100px; border:20px solid #669; background: #fff; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; } </style> </head> <body> <div id="box"> <div class="Square"></div> <div class="rectangle"></div> <div class="trapezoid"></div> <div class="parallelogram"></div> <div class="triangle-up"></div> <div class="circle-circle"></div> </div> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS内边距</title> <style> td.test1 {padding: 20px} td.test2 {padding: 50px,40px} </style> </head> <body> <table border="1"> <tr> <td class="test1"> 这个表格单元的每个边拥有相等的内边距。 </td> </tr> </table> <br /> <table border="1"> <tr> <td class="test2"> 这个表格单元的上和下内边距是 50px，左和右内边距是40px。 </td> </tr> </table> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS两栏布局</title> </head> <style> *{ margin: 0 auto; padding: 0; } .container{ width: 410px; height: 200px; } .left{ background-color: yellow; float: left; height: 100%; width:100px; } .right{ background-color: red; margin-left: 10px; float: left; height:100%; width:300px; } .container::after{ content: ''; display: block; visibility: hidden; clear: both } </style> <body> <div class=container> <div class=left>左分栏</div> <div class=right>右分栏</div> </div> </body> </html>
<!DOCTYPE html> <html > <head> <meta charset="UTF-8" /> <title>多栏布局</title> <style type="text/css"> /*将多个div块的共性单独抽出来然后列举，减少代码量*/ .header,.footer{ width:500px; height:100px; background:blue; } .main{ width:500px; height:300px; } .left,.right{ width:100px; height:300px; } .content-top,.content-bot{ width:300px; height:150px; } /*开始修饰*/ .left{ background:#C9E143; float:left; } .content-top{ background:#FF0000; } .content-bot{ background:#FFA500; } .content{ float:left; } .right{ background:black; float:right; } </style> </head> <body> <div class="header"></div> <div class="main"> <div class="left"></div> <div class="content"> <div class="content-top"></div> <div class="content-bot"></div> </div> <div class="right"></div> </div> <div class="footer"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS过渡属性</title> <style> .box { width: 200px; height: 200px; border: 1px solid #000; margin: 100px auto; background-color: red; transition-property: all; /*all:表示所有属性。*/ transition-duration: 2s; /* 过渡持续时间 */ transition-timing-function:ease-out; /* 动画变幻速度:减速*/ transition-delay: 1s; /* 动画延迟 */ } .box:hover { width: 600px; background-color: blue; } </style> </head> <body> <div class="box"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS变形</title> <style> div { width: 100px; height: 100px; border: 1px solid #000; background-color: red; float:left; margin:50px; } .box-one{ transform: rotate(30deg);/*旋转30度*/ } .box-two{ transform: translate(20px,20px);/*向左边移动20个像素，向下移动100像素。*/ } .box-three{ transform: scale(2,1.5); ;/*宽度为原来的大小的2倍，和高度原始大小3倍的高度。*/ } .box-four{ transform: skew(30deg,20deg);/*在X轴和Y轴上倾斜20度30度。*/ } </style> </head> <body> <div class="box-one"></div> <div class="box-two"></div> <div class="box-three"></div> <div class="box-four"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>习题</title> <style type="text/css"> #left { background-color:#999; border:2px solid #333; width:300px; height:300px; float:left; } #right1 { background-color:#999; border:2px solid #333; width:300px; height:300px; margin-left:50px; float:left ; } #right2 { background-color:#999; border:2px solid #333; width:300px; height:300px; position:absolute ; left:700px; } </style> </head> <body> <div id="left">左列</div> <div id="right1">右列1</div> <div id="right2">右列2</div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>实验</title> <style type="text/css"> *{ padding:0px; } #contenter{ text-align:center; padding:15px; width:800px; height:500px; border:1px solid #000; position:relative; } #banner,#footer{ text-align:center; border:1px solid #000; background-color:#ffcc33; width:800px; height:50px; clear:both; margin:10px 0px; } #main{ width: 800px; height: 300px; background-color:#9CF; } #content{ text-align:center; width:580px; height:100%; border:1px solid #000; float:left; } #links{ text-align:center; border:1px solid #000; width:205px; height:100%; margin-left:10px; float:left; } #main::after{ content: ''; display: block; visibility: hidden; clear: both; } </style> </head> <body> <div id="contenter">#contenter <div id="banner">#banner</div> <div id="main"> <div id="content">#content</div> <div id="links">#links</div> </div> <div id="footer">#footer</div> </div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS两栏布局</title> </head> <style> *{ margin: 0 auto; padding: 0; } .container{ width: 410px; height: 200px; } .left{ background-color: yellow; float: left; height: 100%; width:100px; } .right{ background-color: red; margin-left: 10px; float: left; height:100%; width:300px; } .container::after{ content: ''; display: block; visibility: hidden; clear: both } </style> <body> <div class=container> <div class=left>左分栏</div> <div class=right>右分栏</div> </div> </body> </html>
