1. Comprehensive case: excellent purchase Express
Remove the list of small dots before li- style:none
*{padding:0;margin:0;}
.box{width: 248px;height: 163px;border: 1px solid #ccc;margin:100px auto;}
.box h3{height: 32px;border-bottom:1px dotted #ccc;font-size: 14px;font-weight: 400;line-height: 32px;padding-left: 15px;}
ul{margin-top: 7px;}
ul li{list-style: none;height: 23px;line-height: 23px;padding-left: 20px;}
ul li a{text-decoration:none;font-size: 12px;color: #666;}
ul li a:hover{text-decoration:underline;}
<div class="box">
<h3>Shopping Express</h3>
<ul>
<li><a>[Special] free headset</a></li>
<li><a>[Special] free headset</a></li>
<li><a>[Special] free headset</a></li>
<li><a>[Special] free headset</a></li>
<li><a>[Special] free headset</a></li>
</ul>
</div>2. Border radius
Parameter can be numeric or percentage%
If you want to set a square as a circle, change the value to half of the height or width. 50% is OK
If it's a rectangle, set it to half the height
.juxing{width:200px;/*height: 150px;*/height: 200px;background-color: pink;/*border-radius:10px;*/border-radius:100px;border-radius:50%;/*50%That is, half the width and half the height are equivalent to 100px*/}
.yuanxing{width: 300px;height: 100px;border-radius:50px;background-color: skyblue;/*Rounded rectangle set to half height*/}
<div class="juxing"></div>
<div class="yuanxing"></div>If you want to set four corners separately: border top left radius / border top right radius / border bottom left radius / border top bottom radius
.radius{width: 300px;height: 300px;/*border-radius:10px 20px 50px 90px;*/border-radius:10px 50px;border-top-left-radius:400px; background: purple;/*Set four different angles*/}
<div class="radius"></div>3. Box shadow
border-shadow: h-shadow v- shadow blur spread color inset
h-shadow: position of horizontal shadow (required)
v-shadow: position of vertical shadow (required)
Blur: blur distance (optional)
spread: shadow size (optional)
Color: shadow color (optional)
inset: change the outer shadow to the inner shadow default, but you can't write this word, otherwise the shadow will be invalid (optional)
The box shadow does not take up space and will not affect the floating of other boxes
.MyBox{width: 200px;height: 200px;background: yellow;margin:100px auto;box-shadow:10px 10px 10px 10px rgba(0,0,0,.2);
<div class="MyBox"></div>4. Floating
(1) . standard flow (normal flow / document flow): labels are arranged in the specified default way
Block level elements are exclusive to one row, arranged from top to bottom (div, HR, P, h1-h6, UL, ol, form, table)
The elements in the row are arranged from left to right, and they will wrap automatically when they touch the edge of the parent element (span,a,i,em)
.left,.right{width: 200px;height: 200px;background: green;float: left;}
.right{float: right;}
<div class="left">1</div>
<div class="right">2</div>(2) The most important features of floating elements:
1. Out of standard flow control, (floating) move to the specified position (moving): out of standard flow control
2. The floating box no longer retains its original position
Any element can float, no matter what the original pattern element is, after adding the element, it has the similar characteristics of the block element in the row
If the width of the block level box is not set, the default width is the same as that of the parent, but after adding the float, its size depends on the content
.box1{background-color: pink;width: 200px;height: 200px;float: left;}
.box2{background: purple;width: 300px;height: 300px;}
<div class="box1">Floating box</div>
<div class="box2">Box of standard flow</div>If the height of the upper layout is too high, the lower box will follow the height of the upper box
div{float: left;width: 200px;height: 100px;background: #c00;}
.two{background: purple;height: 249px;}
.four{background: blue;}
<div>1</div>
<div class="two">2</div>
<div>3</div>
<div class="four">4</div>
<div>5</div>
<div class="four">6</div>
<div>7</div>
<div>7</div>
<div>7</div>
<div>7</div>
<div>7</div>
<div>7</div>If the inline element has a float, you can give the width height directly without converting the block level / inline element
div{float: left;width: 200px;height: 100px;background: #c00;}
/*If the inline element has a float, you can give the width height directly without converting the block level / inline element*/
p{float: right;background: purple;height: 400px;}
<div>1</div>
<div>2</div>
<div>3</div>
<p>aaa</p>Xiaomi layout case
(1) Left and right layout
.box{width: 1200px;height: 460px;background: pink;margin:0 auto;}
.left{width: 230px;height: 460px;background: skyblue;float: left;}
.right{width: 970px;height: 460px;background: #c00;float: left;}
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>(2) Four in a row
.box{width: 1226px;height: 285px;background: #c00;margin:0 auto;}
.box li{width: 296px;height: 285px;background:blue;float: left;margin-right: 14px;}
.box .last{margin-right: 0;}
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>(3) Left and right layout + four in one row
.box{width: 1226px;height: 615px;background: #c00;margin:0 auto;}
.left{float: left;width: 234px;height: 615px;background:skyblue;}
.right{float: right;width: 992px;height: 615px;background:blue;}
.right>div{background:purple;width:234px;height:300px;float: left;margin-left: 14px;margin-bottom: 14px;}
<div class="box">
<div class="left"></div>
<div class="right">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>(3) . clear float (close tag, close door to hit child)
The essence of eliminating floating is to eliminate the influence of floating elements
If the parent element itself has a height, you do not need to clear the float
After floating is cleared, the parent element will automatically detect the height according to the child box. If the parent level has a height, the following standard flow will not be affected
1. Extra label method (this new empty label must be a block level element) clear:both;left;right;
.box{background: #c00;width: 1200px;margin:0 auto;}
.box .first{width: 200px;height: 400px;background: purple;float: left;}
.box .second{width: 300px;height: 400px;background: blue;float: left;}
.borther{width: 1220px;background: green;height: 500px;margin:0 auto;}
<div class="box">
<div class="first"></div>
<div class="second"></div>
<div style="clear:both;"></div>
</div>
<div class="borther"></div>2. add the overflow attribute to the parent (overflow:hidden can also be auto/scroll)
.box{background: #c00;width: 1200px;margin:0 auto;}
.box .first{width: 200px;height: 400px;background: purple;float: left;}
.box .second{width: 300px;height: 400px;background: blue;float: left;}
.borther{width: 1220px;background: green;height: 500px;margin:0 auto;}
.overflow{overflow: hidden;}
<div class="box overflow">
<div class="first"></div>
<div class="second"></div>
</div>
<div class="borther"></div>3. Add after pseudo element to parent
.box{background: #c00;width: 1200px;margin:0 auto;}
.box .first{width: 200px;height: 400px;background: purple;float: left;}
.box .second{width: 300px;height: 400px;background: blue;float: left;}
.borther{width: 1220px;background: green;height: 500px;margin:0 auto;}
.clearfix:after{content:"";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{*zoom:1;}/*IE6,7 proper*/
<div class="box clearfix">
<div class="first"></div>
<div class="second"></div>
</div>
<div class="borther"></div>4. Add double pseudo elements to parent (mixed doubles)
.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}/*IE6,7 proper*/
<div class="box clearfix">
<div class="first"></div>
<div class="second"></div>
</div>
<div class="borther"></div>