列表属性
| 属性 | 取值 | 描述 |
|---|---|---|
| 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>
扫一扫
624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
