赞
踩
- <style>
- #div1{
- width: 200px;
- height: 200px;
- background-color: #ccc;
- margin: 20px auto;
-
- /* border: 1px solid black; */
- border-style: ridge;
- border-width: 10px;
- border-top: 3px #ff2312 solid;
- }
-
- #div2{
- width: 200px;
- height: 200px;
- background-color: #ccc;
- margin: 20px auto;
- /* border-radius: 20px 30px 40px 50px; */
- border-top-left-radius: 20px;
- border-top-right-radius: 30px;
- border-bottom-left-radius: 40px;
- border-bottom-right-radius: 50px;
- }
-
- #div3{
- width: 100px;
- height: 100px;
- background-color: #ccc;
- margin: 20px auto;
- border-radius: 50%;
- /* line-height: 100px; */
- overflow: hidden;
- }
-
- .box{
- width: 200px;
- height: 100px;
- background-color: #ccc;
- margin: 40px auto;
- border: 1px solid;
- box-shadow: inset 5px 5px 5px #cfc,5px 5px 5px #cfc,-10px -20px 10px #ccf,10px 10px 10px red;
- }
-
- p{
- font-size: 60px;
- font-weight: 900;
- text-shadow: 5px 5px 5px #cfc,-10px -20px 10px #ccf;
- }
- </style>
- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
- <body>
- <div id="div1"></div>
- <div id="div2"></div>
- <div id="div3">文本内容</div>
- <section class="box"></section>
- <br>
- <br>
- <br>
- <p>这是一个段落</p>
- </body>
如下图:
边框:
如上步骤:div1
设置宽度/200px
高度/200px
背景颜色/ 为#ccc
文本居中。上下高为20px自动改变
设置边缘线
边缘线为10px
边缘线顶部线为3px,为红色
border边框:
border-style: 边框样式;
值:
none:定义无边框;
solid:定义实线;
double:定义双实线;
dashed:定义虚线;
dotted:定义点状线;
groove:定义3D凹槽效果;
ridge:定义3D隆起效果;
border-width: 边框粗细默认是3px;
border-color: 边框的颜色默认是黑色(2D)/灰色(3D)。
圆角:
div2
设置宽度/200px
高度/200px
背景颜色/ 为#ccc
文本居中。上下高为20px自动改变
border-radius:6px 6px 6px;(设置圆角)
设置顶部左边
设置底部右边
设置底部左边
设置底部右边
圆角:border-radius:
可控制四个角的圆角;
一个值:四个角的圆角;
两个值:分别代表左上角和右下角、右上角和左下角;
三个值:分别代表左上角、右上角和左下角、右下角;
四个值:分别代表左上角、右上角、右下角、左下角;
单脚设置:
border-top-left-radius: 20px;
border-top-right-radius: 30px;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 50px;
文本内容在边框的应用:
div3
设置宽度
设置高度
设置底部颜色
水平居中,上下20px
圆弧长度为圆心(50%)
溢出值隐藏
阴影:
box
设宽
设高
设背景颜色
水平居中
边框为1px ,固体
box-shadow: inset px px px 颜色 ,px px px 颜色, px px px 颜色 ,px px px 颜色
盒子阴影:box-shadow: inset 5px 5px 5px #cfc,5px 5px 5px #cfc;
值:
inset:内阴影,可选。取值相反。
第一个值:阴影距离盒子的左右距离,正值往右,负值往左,0盒子正下方。
第二个值:阴影距离盒子的上下距离,正值往下,负值往上,0盒子正下方。
第三个值:阴影的清晰度(值不能为负),阴影值越大会以渐变的形式呈椭圆形往外扩散。
第四个值:阴影的颜色;
注意:可以一个元素同时添加多个阴影,值之间以逗号隔开。
文本阴影
p
字体大小为60px
字体粗细为900
文本阴影:大小 颜色
文本阴影:text-shadow: 5px 5px 5px #cfc;
值:
第一个值:阴影距离文本的左右距离,正值往右,负值往左,0文本正下方。
第二个值:阴影距离文本的上下距离,正值往下,负值往上,0文本正下方。
第三个值:阴影的清晰度(值不能为负),阴影值越大会以渐变的形式呈椭圆形往外扩散。
第四个值:阴影的颜色;
注意:可以一个元素同时添加多个阴影,值之间以逗号隔开。
什么是浮动:
浮动最开始出现是为了让文本环绕图片,但是发现浮动元素可以设置宽高或内联排列,是结于inline和block之间的一个特别存在。
地方元素直到遇到父级元素或者同级浮动元素的边沿是停下,多个浮动元素相遇会按照内联的排列方式进行排列。
使用方法:
给元素直接添加:float: left/none/right;
值:
none:默认值,元素不浮动,并会显示在其文档流中出现的位置。
left:向左浮动,会在页面或者父级元素的左侧。
right:向右浮动,会在页面或者父级元素的右侧。
特点:
1.元素使用浮动后会在页面/父元素的左边或者右边停留;
2.元素使用浮动元素之后会脱离文档流,参与浮动文档流;
3.文本和浮动元素相遇,会在其周围停下来;
4.多个浮动元素相遇会按照内联的排列方式进行排列。
为什么需要浮动:
可以用来创建网页布局,比如左右两端布局栏。
为什么需要清除浮动:
当子元素设置了float属性之后,且父元素没有设置高度,而是由资源近视撑出,则导致父元素高度塌陷;
多个浮动元素内联排列,会覆盖页面中正常的文档流中的内容。
清除浮动方法:
1.加高法:给父元素添加高度,值等于大于浮动子元素的高度,把浮动元素关在有高度的盒子之内;
2.clear: both;给浮动元素添加,添加后可以控制当前元素不以内联排列的方式去找其他浮动元素;
3.隔墙法:给浮动元素之间添加clear: both;让两个浮动元素之间添加一堵墙隔开。
-->
- <style>
- #web-list{
- list-style: none;
- padding: 0;
- background-color: aqua;
- }
- #web-list li:hover{
- background-color: green;
- }
-
- #web-list li{
- float: left;
- background-color: greenyellow;
- margin: 0 30px;
- padding: 5px 10px;
- border-radius: 4px;
- /* 鼠标指针设置为超衔接 */
- cursor: pointer;
-
-
- }
- .clear{
- clear: both;
- }
- .clear-fix::after{
- content: "";
- display: block;
- clear: both;
- }
- </style>
- 、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
- <body>
- <ul id="web-list" class="clear-fix">
- <li>HTML</li>
- <li>CSS</li>
- <li>JavaScript</li>
- <li>VUE</li>
- <!-- <div class="clear"></div> -->
- </ul>
- </body>
如图所示:鼠标移动在字体上变色
第一步:《ul》的布局 1.取消《li》中前面“.”,2.内容填充为0,3.设置背景颜色
第二部:《li》 设置背景颜色
第三步:设置元素使用浮动布局 1.左浮动,2.背景颜色为绿色,3.页边距上下0 左右20px
4.圆弧为4px,5光标改为超链接
第四步:取消浮动
第五步:同第四步 在不添加元素情况取消浮动
float:设置元素使用浮动布局,浮动有左浮动和右浮动。
值:
none:默认值,定义无。
left:左浮动。
right:右浮动。
预算设置浮动布局之后,会脱离原有的文档流,参与浮动文档流;
在浮动文档流中,块元素也是横向排列,而且宽度不在继承父元素的100%。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。