仿照bootstrap做的静态网页,主要把网页分了三个块,头部,菜单项,内容。
学了三天,做静态网页的时候,认识到盒子的重要性,基本每个内容,每个小块都需要用盒子包裹起来,这样,思路就可以理的很清楚,把整体分为小块,一块一块的做,也就没那么难了。
practice.html
链接了,重置网页的css样式表和自己写的网页内容中的样式表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/practice.css">
</head>
<body>
<div class="header">
<div class="first">Project name</div>
<div class="input-select">
<input type="text" name="" id="" placeholder="Search">
</div>
<div class="header-select">
<div class="text">
<a href="">Dashboard</a>
</div>
<div class="text">
<a href="">Settings</a>
</div>
<div class="text">
<a href="">Profile</a>
</div>
<div class="text">
<a href="">Help</a>
</div>
</div>
</div>
<div class="menu">
<div class="menu-area-one">
<div class="menu-text">Overview</div>
<div class="menu-text">Reports</div>
<div class="menu-text">Analytics</div>
<div class="menu-text">Export</div>
</div>
<div class="menu-area">
<div class="menu-text">Nav item</div>
<div class="menu-text">Nav item again</div>
<div class="menu-text">One more nav</div>
<div class="menu-text">Another nav item</div>
<div class="menu-text">More navigation</div>
</div>
<div class="menu-area">
<div class="menu-text">Nav item again</div>
<div class="menu-text">One more nav</div>
<div class="menu-text">Another nav item</div>
</div>
</div>
<div class="content">
<div class="content-title">
<h1>Dashboard</h1>
</div>
<div class="shape">
<div class="shape-circle"></div>
<div class="shape-text">Label</div>
<div class="shape-text shape-text2">Something else</div>
</div>
<div class="shape">
<div class="shape-circle"></div>
<div class="shape-text">Label</div>
<div class="shape-text shape-text2">Something else</div>
</div>
<div class="shape">
<div class="shape-circle"></div>
<div class="shape-text">Label</div>
<div class="shape-text shape-text2">Something else</div>
</div>
<div class="shape">
<div class="shape-circle"></div>
<div class="shape-text">Label</div>
<div class="shape-text shape-text2">Something else</div>
</div>
<div class="content-title">
<h1>Section title</h1>
</div>
<div class="content-title">
<div class="text content-text">
<b>#</b>
</div>
<div class="text content-text">
<b>Header</b>
</div>
<div class="text content-text">
<b>Header</b>
</div>
<div class="text content-text">
<b>Header</b>
</div>
<div class="text content-text">
<b>Header</b>
</div>
</div>
<div class="content-title content-title-gray">
<div class="text content-text">1.001</div>
<div class="text content-text">Lorem</div>
<div class="text content-text">Ipsum</div>
<div class="text content-text">dolor</div>
<div class="text content-text">sit</div>
</div>
<div class="content-title ">
<div class="text content-text">1.002</div>
<div class="text content-text">amet</div>
<div class="text content-text">consectetur</div>
<div class="text content-text">adipiscing</div>
<div class="text content-text">elit</div>
</div>
<div class="content-title content-title-gray">
<div class="text content-text">1.003</div>
<div class="text content-text">Integer</div>
<div class="text content-text">nec</div>
<div class="text content-text">odio</div>
<div class="text content-text">Praesent</div>
</div>
</div>
</body>
</html>
practice.css
自己写的内容样式表
.header{
position:fixed;
top:0;
left:0;
/* right:0; */
width: 100%;
height: 50px;
background: #222;
line-height: 50px;
z-index: 5;
}
.menu{
position: absolute;
top: 50px;
left: 0;
bottom: 0;
width: 220px;
background: rgb(238, 238, 238);
}
.content{
position:absolute;
left:240px;
top:50px;
right: 0;
bottom: 0;
background: rgb(255, 255, 255);
}
.first{
float: left;
width:150px;
color: rgb(132, 145, 138);
text-align: center;
font-size: 18px;
}
.input-select{
position: fixed;
top: 3px;
width: 180px;
right: 360px;
border-radius: 10px;
}
.header-select{
position: fixed;
height: 50px;
width: 360px;
right: 0;
line-height: 50px;
color: rgb(132, 145, 138);
}
.text{
float: left;
height: 50px;
width: 70px;
color: rgb(132, 145, 138);
margin-right: 15px;
text-align: center;
line-height: 50px;
}
a {
color:rgb(132, 145, 138);
}
.menu-area{
position: relative;
width: 100%;
height: 205px;
background-color: rgb(238, 238, 238);
margin-top: 13px;
margin-bottom: 40px;
}
.menu-area-one{
position: relative;
width: 100%;
height: 160px;
background-color: rgb(238, 238, 238);
margin-top: 5px;
margin-bottom: 40px;
}
.menu-text{
position: relative;
width: 100%;
height: 30px;
color: #418BCA;
background-color: rgb(238, 238, 238);
line-height: 30px;
margin-top: 15px;
padding-left: 10px;
box-sizing: border-box;
}
.menu-text:hover{
color: #fff;
background-color:#418BCA;
}
.content-title{
width: 90%;
margin-left: 40px;
height: 50px;
border-bottom: 1px solid rgba(0,0,0,0.2);;
}
.shape{
/* position: relative; */
display: inline-block;
width: 200px;
margin-left: 40px;
height: 250px;
}
.shape-circle{
/* position: absolute; */
margin-top: 15px;
/* margin-right: 30px; */
width: 160px;
height: 160px;
border-radius: 80px;
background: #777777;
}
.shape-text{
width: 160px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 1em;
}
.shape-text2{
color: rgba(0,0,0,0.4);
font-size: 16px;
}
.content-text{
color: #000;
margin-right: 110px;
}
.content-title-gray{
background-color: #F9F9F9;
}
reset.css
重置样式表都可以在网上找到,这里就不贴代码了。
这里是效果图