效果
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/ceshi.css">
<title>CSS Crash Course</title>
</head>
<body>
<div class="contain">
<div class="box1">
<h1>Hello world</h1>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Molestiae ducimus, tenetur neque quo
ab rerum adipisci blanditiis veniam voluptates unde illum f
ugiat expedita reiciendis quasi hic explicabo voluptate. Ab ducimus ipsa distinctio quaerat unde.
Assumenda
explicabo odio ut numquam suscipit illo, dolores, vitae excepturi nobis placeat quasi deleniti facere
voluptates similique totam ex consequatur! Numquam ratione excepturi et voluptate, quam, cupiditate
velit
voluptatibus assumenda fuga quia dicta? Nemo qui ad, recusandae eligendi ex minima veniam cum id
voluptatibus, voluptas blanditiis neque aliquid ipsam suscipit, molestiae voluptatem quibusdam? Dolorum
illum accusamus magnam tempora laborum deserunt numquam quisquam adipisci. Recusandae, ad. Sapiente.
</p>
<button>Button</button>
</div>
<div class="box2">
<h1>Hello world</h1>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Molestiae ducimus, tenetur neque quo
ab rerum adipisci blanditiis veniam voluptates unde illum f
ugiat expedita reiciendis quasi hic explicabo voluptate. Ab ducimus ipsa distinctio quaerat unde.
Assumenda
explicabo odio ut numquam suscipit illo, dolores, vitae excepturi nobis placeat quasi deleniti facere
voluptates similique totam ex consequatur! Numquam ratione excepturi et voluptate, quam, cupiditate
velit
voluptatibus assumenda fuga quia dicta? Nemo qui ad, recusandae eligendi ex minima veniam cum id
voluptatibus, voluptas blanditiis neque aliquid ipsam suscipit, molestiae voluptatem quibusdam? Dolorum
illum accusamus magnam tempora laborum deserunt numquam quisquam adipisci. Recusandae, ad. Sapiente.
</p>
<button>Button</button>
</div>
<div class="list">
<ul>
<li><a href="">list 1</a></li>
<li><a href="123.abc">list 2</a></li>
<li><a href="">list 3</a></li>
<li><a href="">list 4</a></li>
<li><a href="">list 5</a></li>
</ul>
</div>
<div class="block">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro est eaque labore maiores dolores
voluptatum. In saepe iusto sint consequatur ipsa rem, tempore, itaque sequi quae, nobis molestias unde
esse!
</p>
</div>
<div class="block">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro est eaque labore maiores dolores
voluptatum. In saepe iusto sint consequatur ipsa rem, tempore, itaque sequi quae, nobis molestias unde
esse!
</p>
</div>
<div class="block">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro est eaque labore maiores dolores
voluptatum. In saepe iusto sint consequatur ipsa rem, tempore, itaque sequi quae, nobis molestias unde
esse!
</p>
</div>
<div class="clearfix"></div>
<div id="main-block">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro est eaque labore maiores dolores
voluptatum. In saepe iusto sint consequatur ipsa rem, tempore, itaque sequi quae, nobis molestias unde
esse!
</p>
</div>
<div id="sidebar">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro est eaque labore maiores dolores
voluptatum. In saepe iusto sint consequatur ipsa rem, tempore, itaque sequi quae, nobis molestias unde
esse!
</p>
</div>
<ul class="list2">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<div class="position-box">
<h1>Heading1</h1>
<h2>Heading2</h2>
</div>
<button id="fixed">Buttoon</button>
</div>
<div style="margin-top:1000px;"></div>
</body>
</html>
CSS
body {
background-color:blanchedalmond;
color:
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 1.5em;
}
button {
background-color:
color:
padding: 10px 5px;
}
button:hover {
background-color: red;
}
button:active {
background-color:
}
a {
text-decoration: none;
color:
}
a:hover {
color: cyan;
}
a:visited {
}
.clearfix {
clear: both;
}
.box1 {
background-color: antiquewhite;
color:brown;
border: 5px blue solid;
border-right: 5px red solid;
border-left: 8px blue solid;
border-top: 10px green dotted;
border-bottom: 1px firebrick double;
border-bottom-width: 8px;
border-bottom-style: dashed;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
margin-top: 20px;
}
.box1 h1 {
font-family: 'Times New Roman', Times, serif;
font-weight: 800;
font-style: italic;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 1em;
word-spacing: 2em;
}
.box2 {
border: 5px dotted
border-radius: 5px;
padding: 20px;
margin: 20px 0px;
position: relative;
}
.box2 h1 {
text-align: center;
}
.contain {
width: 80%;
margin: auto;
}
.list li {
list-style-image: url('../image/2.png');
list-style: square;
}
.block {
float: left;
width: 33.3%;
border: 1px solid
box-sizing: border-box;
}
float: left;
width: 70%;
border: 1px solid
box-sizing: border-box;
}
float: right;
width: 30%;
border: 1px solid
box-sizing: border-box;
}
.list2 li:nth-child(even) {
background-color: grey;
}
.position-box {
width: 500px;
height: 500px;
border: 1px solid black;
position: relative;
}
.position-box h1 {
position:absolute;
top: 50px;
}
.position-box h2 {
position:absolute;
left: 30px;
}
position: fixed;
right: 0;
bottom: 200px;
}
