列表属性
属性 | 取值 | 描述 |
---|---|---|
list-style-type | disc等 | 改变列表的项目符号 |
list-style-image | url('图片路径') | 用图像表示项目符号 |
list-style-position | inside;outside | 项目符号出现在列表内容之外还是内部 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> ul{ /*list-style-type: decimal;*/ /*list-style-image: url("ceshi3.jpg");*/ list-style-position: outside; /*边框*/ /*默认内边距40px*/ border: 1px solid skyblue; } ul li{ border: 1px solid red; } </style> <title>列表属性</title> </head> <body> <h1>列表属性</h1> <ul> <li>list-style-type:列表样式类型</li> <li>list-style-image:列表样式图片</li> <li>list-style-position:列表样式位置</li> </ul> </body> </html>
尺寸、显示、轮廓属性
属性 | 取值 | 描述 |
---|---|---|
width | 数值或百分比 | 设置宽度 |
height | 数值或百分比 | 设置高度 |
display | none:不显示 block块级显示 inline行级显示 | 设置显示方式 |
outline-style | solid:实现 dotted :虚线 dashed:虚线 | 设置轮廓的样式 |
outline-color | 16进制,用于表示颜色的英文 | 设置轮廓的颜色 |
outline-width | 数值 | 设置轮廓的高度 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #div1{ width: 200px; height: 100px; background-color: skyblue; display: inline-block;/*行级块*/ /*display:none 消失*/ } #span1{ background-color: pink; display: inline-block; } #img1{ vertical-align: top;/*垂直对齐方式:middle:中间对齐 bottom:底部对齐 baseline:基线对齐*/ outline: 5px solid cornflowerblue; } </style> <title>尺寸显示轮廓</title> </head> <body> <h1>尺寸显示轮廓</h1> <ul> <li>width:宽度</li> <li>height:高度</li> <li>display:显示方式 none:不显示 block:块级元素 inline:行级元素 inline-block:行级块</li> <li>outline-width:轮廓的宽度</li> <li>outline-style:轮廓的样式</li> <li>outline-color:轮廓的颜色</li> </ul> <div id="div1"> div1 </div> <span id="span1"> javaee开发 </span> <img id="img1" src="ceshi2.jpg" width="200"/><span>这厮一张图片</span> </body> </html>
浮动属性
-
float:
-
浮动框可以向左或向右移动,直到他的边缘碰到包含框或另一个浮动框的边框为止
-
浮动框不在文档的普通流中,所以文档普通流中的块框表现的就像浮动框不存在一样
-
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> #div1{ width: 200px; height: 100px; background-color: skyblue; /*浮动*/ float: left; } #div2{ width: 200px; height: 100px; background-color: pink; float: left; } #div3{ width: 200px; height: 100px; background-color: green; float: left; } #div4{ height: 150px; background-color: chartreuse; /*清除浮动的影响*/ clear: both; } </style> <title>浮动属性</title> </head> <body> <h1>浮动属性</h1> <ul> <li>float:none 不浮动 left 左浮动 right:右浮动</li> <li>clear: 清除浮动的影响</li> </ul> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </body> </html>
-
浮动框,div塌陷问题:如果div包含的所有元素都浮动了,此时div会没有高度,造成塌陷
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> #box{ border: 1px solid red; /*overflow:引起父元素重新计算高度*/ overflow: hidden; } #div1{ width: 100px; height: 100px; background-color: chartreuse; float: left; } #div2{ width: 100px; height: 100px; background-color: pink; float: left; } #div3{ width: 100px; height: 100px; background-color: skyblue; float: left; } #box:after{ content: ""; display: block; clear: both; } </style> <title>父元素塌陷问题</title> </head> <body> <h1>父元素塌陷</h1> <ul> <li>如果div包含的所有元素都浮动了,此时div会没有高度,造成塌陷</li> <ul> <li>解决方法1:给父元素设置高度,无法实现自适应</li> <li>解决方法2:给父元素添加overflow,可能会隐藏元素</li> <li>解决方法3:给父元素添加空div,改变页面元素</li> <li>解决方法4:添加伪元素</li> </ul> </ul> <div id="box"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div style="height: 0;clear: both"></div> </div> </body> </html>
-
clear属性
-
规定元素的哪一测不允许其他浮动元素
-
取值 描述 left 左侧不允许浮动元素 right 右侧不允许浮动元素 both 左右两侧均不允许浮动元素 none 默认值,允许浮动元素出现在两侧
-
-
overflow:内容溢出如何处理
-
visible:显示
-
hidden:隐藏
-
scroll:滚动条
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> #box{ width: 100px; height: 100px; background-color: pink; overflow:scroll; } </style> <title>overflow属性</title> </head> <body> <h1>overflow:内容溢出父元素,父元素如何处理</h1> <ul> <li>visiable:显示</li> <li>hidden:隐藏</li> <li>scroll:滚动</li> </ul> <div id="box"> this is css this is cssthis is cssthis is cssthis is cssthis is cssthis is cssthis is cssthis is cssvvv </div> </body> </html>
-
定位属性
-
使用CSS定位position属性可以精确控制目标元素的位置
-
取值 描述 static 默认值,既没有定位,遵循正常的文档流 relative 相对定位元素的定位是相对正常位置,较少使用 absolution 绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么他的位置相对于html fixed 元素的位置相对于浏览器窗口时固定位置 -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> #left{ width: 50px; height: 200px; background-color: pink; /*更改定位 absolute:绝对定位 fixed:固定定位 */ position: fixed; left: 20px; top: 40%; } #right{ width: 50px; height: 200px; background-color: pink; /*更改定位*/ position: absolute; right: 20px; top: 40%; } </style> <title>定位属性的使用</title> </head> <body> <h1>广告案例</h1> <div id="left" > <p>祝我党百年诞辰</p> <p>祝我党百年诞辰</p> <p>祝我党百年诞辰</p> <p>祝我党百年诞辰</p> <p>祝我党百年诞辰</p> <p>祝我党百年诞辰</p> <p>祝我党百年诞辰</p> </div> <div id="right" > <p>祝祖国繁荣昌盛</p> <p>祝祖国繁荣昌盛</p> <p>祝祖国繁荣昌盛</p> <p>祝祖国繁荣昌盛</p> <p>祝祖国繁荣昌盛</p> <p>祝祖国繁荣昌盛</p> </div> </body> </html>
盒子模型
-
CSS盒模型是把标签看作一个盒子,封装内容的HTML元素,他包括:边距、边框、填充和实际内容
-
*
-
边框
属性值 取值 描述 border-style solid,double,dashed,dotted 设置边框的样式 border-color 16进制,用于表示颜色的英文 设置边框的颜色 border-width 数值 设置边框的宽度 -
外边距
-
margin:边框和边框外层的元素的距离
-
属性值 取值 描述 margin-top 数值 上边距 margin-right 数值 右边距 margin-bottom 数值 下边距 margin-left 数值 左边距 -
简写
-
margin :10px /同时设置四个边距/
-
margin:5px 10px /5px上下 10px左右/
-
margin:5px 10px 20px /*5px上 10px左右 20px下 */
-
-
-
内边距
-
padding:边框和内容之间的距离
-
属性值 取值 描述 padding-top 数值 上内边距 padding-right 数值 右内边距 padding-bottom 数值 下内边距 padding-left 数值 左内边距 -
简写
-
padding:5px /四个方向内边距5px/
-
padding:5px 10px /5px上下 10px左右/
-
padding:5px 10px 15px /5px上 10px左右 15px下/
-
-
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> #box{ width: 100px; height: 100px; background-color: cornflowerblue; border-style: dotted;/*solid 实线 dotted 点线 dashed 虚线 double 双实线*/ border-color: red; margin-bottom: 10px; /*内边距*/ padding: 40px; } #box2{ width: 100px; height: 100px; background-color: pink; border-style: dotted;/*solid 实线 dotted 点线 dashed 虚线 double 双实线*/ border-color: red; margin-top: 10px; } </style> <title>盒子模型</title> </head> <body> <h1>盒子模型</h1> <ul> <li>border:边框</li> <ul> <li>border-style:边框的样式</li> <li>border-color :边框颜色</li> <li>border-width:边框宽度</li> </ul> <li>margin:外边框,上下会合并,左右不会合并</li> <ul> <li>body默认外边距8px</li> <li>p、h1-h6、ul、ol都有默认外边距,根据内容确定</li> </ul> <li>padding:内边框</li> <ul> <li>ul ol 都有内边距40px</li> <li></li> <li></li> <li></li> </ul> </ul> <div id="box"> 内容</div> <div id="box2"></div> </body> </html>
CSS 3扩展属性
圆角属性
-
border-radius
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> #box1{ width: 150px; height: 60px; background-color: skyblue; /*圆角*/ /*将四个角的半径设为10px*/ border-radius: 10px; } #box2{ width: 500px; height: 250px; background-color: skyblue; /*圆角*/ /*设置一个半圆*/ border-radius: 500px 500px 0px 0px; } </style> <title>圆角属性</title> </head> <body> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> </body> </html>
阴影属性
-
box-shadow
-
用于向方框添加阴影
-
语法:box-shadow:10px 10px 5px skyblue
综合案例
-
效果图
-
实现代码
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> /*容器*/ #container{ width: 1000px; height: 700px; /*background-color: skyblue;*/ /*实现div居中*/ margin: 0 auto; /*字体大小*/ font-size: 14px; } /*基本css重置*/ body{ margin: 0; } input,button,select,textarea{ padding: 0; outline: none; border: 1px solid gray; } a{ color: black; text-decoration: none; } img,input,button,select,textarea{ vertical-align: middle; } .class1{ color: red; } /*顶部第一部分*/ #top1{ height: 35px; line-height: 38px; background-color: gray; border-radius: 8px; } #搜索{ color: blue; width: 45px; height: 30px; border-radius: 5px; text-align: center; } #top2{ height: 95px; clear: both; margin-top: 5px; } #search{ width: 500px; height: 30px; border-radius: 10px; } /*顶部第三块*/ #mytable{ clear: both; border: 1px; width: 100%; text-align: center; } .class2{ color: orange; } .class4,.class5{ color: grey; } .class5{ text-align: right; } </style> <title>综合案例</title> </head> <body> <div id="container"> <!--顶部--> <div> <div id="top1" > <div style="float: left;padding-left: 2em"> <a href="" class="class1">亲,请登录</a> <a href="">免费注册</a> <a href="">手机逛淘宝</a> </div> <div style="float: right"> <a href="" class="class1">淘宝网首页</a> <a href="">我的淘宝</a><a href="">购物车</a> <a href="">收藏夹</a><a href="">商品分类</a><a href="">卖家中心</a> <a href="">联系客服</a><a href="">网站导航</a>    </div> </div> <div id="top2" > <div style="float: left;height: 95px"> <img src="pictures/logo.bmp"> </div> <div style="float: left;padding-top: 20px" > <input id="search" type="text" name="search">  <input id="搜索" type="button" value="搜索"><br/> <a href="">网站导航</a> <a href="">网站导航</a> <a href="">网站导航</a> <a href="">网站导航</a> </div> </div> <div></div> <div></div> </div> <!--底部--> <div style="clear: both"> <table id="mytable"> <tr > <td> <img src="pictures/002.png" width="150px"> <div class="class2">¥40.0包邮</div> <div class="class3">世界上最好的商品</div> <div class="class4">服饰专营店</div> <div class="class5">如实描述4.8</div> </td> <td> <img src="pictures/002.png" width="150px"> <div class="class2">¥40.0包邮</div> <div class="class3">世界上最好的商品</div> <div class="class4">服饰专营店</div> <div class="class5">如实描述4.8</div> </td> <td> <img src="pictures/005.png" width="150px"> <div class="class2">¥40.0包邮</div> <div class="class3">世界上最好的商品</div> <div class="class4">服饰专营店</div> <div class="class5">如实描述4.8</div> </td> <td> <img src="pictures/003.png" width="150px"> <div class="class2">¥40.0包邮</div> <div class="class3">世界上最好的商品</div> <div class="class4">服饰专营店</div> <div class="class5">如实描述4.8</div> </td> <td> <img src="pictures/004.png" width="150px"> <div class="class2">¥40.0包邮</div> <div class="class3">世界上最好的商品</div> <div class="class4">服饰专营店</div> <div class="class5">如实描述4.8</div> </td> </tr> <tr> <td> <img src="pictures/006.png" width="150px"> <div class="class2">¥40.0包邮</div> <div class="class3">世界上最好的商品</div> <div class="class4">服饰专营店</div> <div class="class5">如实描述4.8</div> </td> <td> <img src="pictures/007.png" width="150px"> <div class="class2">¥40.0包邮</div> <div class="class3">世界上最好的商品</div> <div class="class4">服饰专营店</div> <div class="class5">如实描述4.8</div> </td> <td> <img src="pictures/011.png" width="150px"> <div class="class2">¥40.0包邮</div> <div class="class3">世界上最好的商品</div> <div class="class4">服饰专营店</div> <div class="class5">如实描述4.8</div> </td> <td> <img src="pictures/009.png" width="150px"> <div class="class2">¥40.0包邮</div> <div class="class3">世界上最好的商品</div> <div class="class4">服饰专营店</div> <div class="class5">如实描述4.8</div> </td> <td> <img src="pictures/010.png" width="150px"> <div class="class2">¥40.0包邮</div> <div class="class3">世界上最好的商品</div> <div class="class4">服饰专营店</div> <div class="class5">如实描述4.8</div> </td> </tr> </table> </div> </div> </body> </html>