Base.css
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
ul {
list-style: none;
}
.col-1 {
width: 8.33%;
float: left;
}
.col-2 {
width: 16.66%;
float: left;
}
.col-3 {
width: 25%;
float: left;
}
.col-4 {
width: 33.33%;
float: left;
}
.col-5 {
width: 41.66%;
float: left;
}
.col-6 {
width: 50%;
float: left;
}
.col-7 {
width: 58.33%;
float: left;
}
.col-8 {
width: 66.66%;
float: left;
}
.col-9 {
width: 75%;
float: left;
}
.col-10 {
width: 83.33%;
float: left;
}
.col-11 {
width: 91.66%;
float: left;
}
.col-12 {
width: 100%;
float: left;
}
示例：基本框架的创建
<!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"> <title>Document</title> <link rel="stylesheet" href="css/base.css"> </head> <body> <!-- 开始填充文字 --> <div id="top" class="col-12" style="background-color: #3C3E3B;height: 10vh;"> <style> .top_left_text { text-align: center; line-height: 10vh; font-size: 1.2rem; font-weight: bolder; } </style> <div class="col-2 top_left_text" style="background-color: pink;height: 10vh;"> <span>游戏商城</span> </div> <div class="col-7" style="background-color: skyblue;height: 10vh;"> <style> .top_center_ul { width: 100%; } .top_center_ul li { width: 25%; float: left; text-align: center; line-height: 10vh; } .top_center_ul li:hover { background-color: black; color: white; cursor: pointer; } </style> <ul class="top_center_ul"> <li>商店</li> <li>关于</li> <li>社区</li> <li>支持</li> </ul> </div> <div class="col-3" style="background-color: red;height: 10vh;"> <style> .top_right_ul { background-color: black; height: 8vh; border-radius: 0px 0px 30% 30%; } .top_right_ul li { width: 33.33%; line-height: 8vh; color: white; float: left; text-align: center; } .top_right_ul li:hover { background-color: gray; } </style> <ul class="top_right_ul" style="width: 100%;"> <li>登录</li> <li>注册</li> <li>搜索</li> </ul> </div> </div> <div class="col-12" style="height: 5vh;"> <div class="col-1" style="height: 5vh;"></div> <div class="col-10" style="height: 5vh;">新鲜事情</div> <div class="col-1" style="height: 5vh;"></div> </div> <div class="col-12" style="height: 50vh;"> <div class="col-1" style="height: 50vh;"></div> <style> .banner-img { height: 50vh; background-color: skyblue; border-radius: 12px; box-shadow: 5px 5px 5px 5px gray; } </style> <div class="col-10 banner-img"></div> <div class="col-1" style="height: 50vh;"></div> </div> </body> </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"> <title>Document</title> <link rel="stylesheet" href="css/base.css"> </head> <body> <!-- top完毕 --> <div class="col-12" style="height: 10vh;background-color: #3D3E3B;"> <style> .top_left_text { text-align: center; font-size: 1.5rem; font-weight: bolder; color: white; line-height: 10vh; } </style> <div class="col-2 top_left_text" style="height: 10vh;"> 游戏商城 </div> <div class="col-7" style="height: 10vh;"> <style> .top_center_ul { width: 100%; } .top_center_ul li { width: 25%; float: left; text-align: center; line-height: 10vh; color: white; cursor: pointer; /* 鼠标变手 */ } </style> <ul class="top_center_ul"> <li>宫廷玉叶酒</li> <li>霸王别鸡</li> <li>干锅咕咾肉</li> <li>佛跳跳</li> </ul> </div> <div class="col-3" style="height: 10vh;"> <style> .top_right_ul { width: 100%; background-color: black; height: 5vh; border-radius: 0px 0px 100px 100px; } .top_right_ul li { width: 33.33%; float: left; text-align: center; color: white; cursor: pointer; } </style> <ul class="top_right_ul"> <li>登录</li> <li>注册</li> <li>搜索</li> </ul> </div> </div> <!-- banner_text --> <div class="col-12"> <div class="col-2" style="height: 5vh;"></div> <div class="col-7" style="height: 5vh;">新鲜事</div> <div class="col-3" style="height: 5vh;"></div> </div> <!-- banner_2 --> <div class="col-12"> <div class="col-2" style="height: 50vh;"></div> <style> .banner_2_img { height: 50vh; background-image: url('imgs/bg.jpg'); background-size: 100% 100%; } .banner_2_img_button { position: relative; left: 85%; top: 85%; } </style> <div class="col-8 banner_2_img"> <button class="banner_2_img_button">￥699.99元</button> </div> <div class="col-2" style="height: 50vh;"></div> </div> </body> </html>
这里每个盒子都要处理好对应的高度比例。
