实现如下图所示的一个网页：网页的内容撑满整个网页。注意：撑满绝不能设定宽和高为一个具体的数字，应该用百分比即100%来设置。
两种布局方式
两种布局方式：
方式一：div块布局
可以不用放在一个大容器里：
（1）分块布局&每块的内容：
上(header)：
TESTSET字体（垂直居中）
TESTSET图片（垂直居中）
下(lower)：
左(menu)：
4个菜单栏（鼠标滑过背景颜色发生改变，同时字体变大，鼠标会变为小手状）
右(lower-right)：
Container-fluid:
上(homePage)：
首页
下：
项目模块(row)（包括图片和创建人）
页码(pages)
实现
2.1 首先要通过div进行布局，确保网页在每个浏览器中显示正常，不会出错
验证的方法：F12，选择每个模块，查看盒子模型是否显示正确。
首行和首页设置具体的高度（30px），菜单栏设置具体的宽度（250px）。
最外层下面div块的高度需要设置其父元素，即body和html的高度为100%，外边距为0。
TESTSET行需要通过绝对定位使它浮在页面顶层，通过设置下面div块的上内边距为30px以及box-sizing:border-box和overflow:hidden来使不出现滚动条且撑满整个屏幕。
菜单栏的设置同首行，设置具体的宽度和绝对定位使它浮在下面的最左边。同时设置右侧lower-right的左内边距为250px，以及box-sizing属性值为hidden和overflow属性值为hidden，使不出现滚动条。
Container-fluid（包括首页行和项目图片块）：设置宽度和高度均为父元素的100%，设置上内边距为30px（首行高度），左内边距为0，下内边距为100px（为页码块留出空间）box-sizing属性值为border-box。
首页行：通过绝对定位使它漂在父元素的最上层(position和top)
row项目块的高度是其父元素container-fluid块的高度减去首页行的具体高度30px、父元素为显示页码留出的具体高度100px剩余的空间高度。
页码块：设置绝对定位和bottom、right使页码块漂在父级的右下方。
2.2 具体实现每个块
首行：
通过设置行高line-height属性值和行高height值一致30px，使文本垂直居中。
通过设置img属性vertical-align值为middle，使图片垂直居中。
通过将下拉框和“欢迎您，test”设置为行内元素span，然后设置span元素float属性值为right使它右靠齐，同时可设置适当的外边距使span元素看起来不太靠右。
菜单页：
通过设置无序列表ul，其中每个菜单行都是一个li。但要注意ul的默认样式
ul,ol{
Margin-left:40px;
List-style-position:outside;
}
使用list-style-type:none;取消无序列表前的小圆点，设置margin和padding为0使文本完全左对齐。
在li元素中，通过设置行高line-height和text-align属性值为center使菜单栏的文本水平居中。鼠标滑过出现小手的样式通过设置cursor属性值为pointer实现。
首页行：
对“首页”文本设置margin外边距使看起来不完全靠左。
项目图片：
通过给左侧菜单页设置id属性，一旦点击菜单，将在项目框中出现对应的项目图片、项目名称和创建人。
2.3 JS实现的两个功能
1.鼠标点击菜单1 变色；点击菜单2 变色且菜单1恢复原色
2.点击菜单1 右侧container-fluid出现1个图片 点击2 出现2个图片给每个菜单栏设置一个id号，一旦点击则：
通过document.getElementById(id)获取当前的li元素，然后通过li元素的className属性（给它添加一个className属性代表的样式），即可实现功能1。当然，每次点击仍然需要判断上次点击的lastid是否是此次点击的id，如果是，则直接返回；反之，首先清除上个菜单栏的样式（通过document.getElementById(lastid).classList.remove("class名")），然后再次给当前的id元素所在标签添加样式（document.getElementById(id).className+="class类名"：
.liColor a {
color: white;
font-size: large;
}
.liColor {
background-color: cyan;
}
同理，动态加载图片的实现首先获取class属性值为row的div块，在这个块中分别创建div块（添加program-imgclass属性值，在这个class中设置背景图片以及图片的background-repeat属性、background-size属性、高度）、p元素（放置项目名称）、h5元素（放置创建者、通过绝对定位使它漂在背景图片的右下角）：
.col-sm-3 {
border-radius: 25px;
padding: 0 1%;
}
.col-sm-3 .program-img {
background-image: url(./1.jpg);
background-repeat: no-repeat;
background-size: cover;
border-radius: 25px;
height: 150px;
margin: 10%;
}
.program-img {
position: relative;
}
.h5-creator {
position: absolute;
right: 5%;
bottom: 5%;
}
完整代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!-- 页面的高度和设备屏幕的宽度一致 初始缩放比为1：1 浏览器字体内容的缩放 minimum-scale=0.24-->
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- // jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!-- 要实现的两个功能：1.鼠标点击菜单1 变色；点击菜单2 变色且菜单1恢复原色
2.点击菜单1 右侧container-fluid出现1个图片 点击2 出现2个图片 -->
<!-- 改进：
颜色的变化：a.通过querySelector[All]获取 b.通过在样式中定义class样式（active），以及添加class属性来改变
图片显示的变化： a.通过添加class属性设置背景图片 b.通过点击菜单——造数据——渲染到前端（添加class属性，设置样式）-->
</head>
<body>
<div class="header">
TESTSET
<img src="./2.png">
<span>
<select>
<option selected="selected">中文</option>
<option>English</option>
</select>
欢迎您，test
</span>
</div>
<div class="lower">
<div class="menu" id="menu">
<ul>
<li id="1" onclick="menuControlImgs('1')">
<a href="javascript:;" onclick="menuControlImgs('1')">菜单1</a>
</li>
<li id="2" onclick="menuControlImgs('2')">
<a href="javascript:;" onclick="menuControlImgs('2')">菜单2</a>
</li>
<li id="3" onclick="menuControlImgs('3')">
<a href="javascript:;" onclick="menuControlImgs('2')">菜单3</a>
</li>
<li id="4" onclick="menuControlImgs('4')">
<a href="javascript:;" onclick="menuControlImgs('2')">菜单4</a>
</li>
<li id="20" onclick="menuControlImgs('20')">
<a href="javascript:;" onclick="menuControlImgs('2')">菜单20</a>
</li>
</ul>
</div>
<div class="lower-right">
<div class="container-fluid">
<div class="homePage">
<p>首页</p>
</div>
<!-- 放置项目图片 -->
<div class="row" id="row">
</div>
</div>
<div class="pages">
<ul>
<li>
<button type="button">1</button>
</li>
<li>
<button type="button">2</button>
</li>
<li>
<button type="button">3</button>
</li>
<li>
<button type="button">4</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var lastId = null;//保存上一个id
var flag = true;//标记第一次是否已添加
//造数据
function createData(index) {
var array = new Array(index);
for (var i = 0; i < index; i++) {
var projectName = "项目" + i;
var creator = "张" + i;
console.log("creator=" + creator);
var jsonObj = {
"projectName": projectName,
"creator": creator
}
array[i] = jsonObj;
}
return array;
}
//渲染图片
function loadImg(array, num, row) {
for (var i = 0; i < num; i++) {
var divInner = document.createElement("div");
divInner.className += "program-img";
var p = document.createElement("p");
p.innerText = array[i].projectName;
var h = document.createElement("h5");
h.innerText = array[i].creator;
h.className += "h5-creator";
var divOut = document.createElement("div");
divOut.append(divInner);
divInner.append(p);
divInner.append(h);
divOut.className += "col-sm-3";
row.append(divOut);
}
}
function menuControlImgs(id) {
if (lastId == id) {
return;
}
var num = parseInt(id);
console.log("num=" + num);
var array = createData(num);
var li = document.getElementById(id);
if (!flag) {
//清除上一个菜单的样式
document.getElementById(lastId).classList.remove("liColor");
// document.getElementById(lastId).classList.remove("active");
} else {
lastId = id;
flag = false;
}
//添加新的样式
li.className += 'liColor';
var row = document.getElementById("row");
row.innerHTML = null;
loadImg(array, num, row);
lastId = id;//修改当前元素id
}
</script>
<style>
.liColor a {
color: white;
font-size: large;
}
.liColor {
background-color: cyan;
}
.pinter {
cursor: pointer;
}
.col-sm-3 {
border-radius: 25px;
padding: 0 1%;
}
.col-sm-3 .program-img {
background-image: url(./1.jpg);
background-repeat: no-repeat;
background-size: cover;
border-radius: 25px;
height: 150px;
margin: 10%;
}
.program-img {
position: relative;
}
.h5-creator {
position: absolute;
right: 5%;
bottom: 5%;
}
body {
height: 100%;
margin: 0;
}
html {
height: 100%;
margin: 0;
}
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
line-height: 30px;
height: 30px;
border: 1px solid black;
/* background-color: blanchedalmond;*/
overflow: hidden;
box-sizing: border-box;
Z-index: 1;
}
div img {
vertical-align: middle;
}
span {
float: right;
margin: 0 10px;
}
select {
margin: 0 20px;
}
.lower {
position: relative;
width: 100%;
box-sizing: border-box;
height: 100%;
overflow: hidden;
padding-top: 30px;
}
.menu {
width: 250px;
height: 100%;
position: absolute;
left: 0;
top: 30px;
/* background-color: black; */
border-right: 1px solid black;
Z-index: 1;
}
.lower-right {
position: relative;
width: 100%;
height: 100%;
/* background-color: cadetblue; */
padding-left: 250px;
box-sizing: border-box;
/* border-left:1px solid black; */
overflow: hidden;
}
.row {
height:100%;
overflow-x: hidden;
overflow-x: hidden;
}
.menu ul {
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul li {
text-align: center;
line-height: 45px;
/* border:1px solid white; */
border-bottom: 1px solid black;
cursor: pointer;
}
.menu ul li a {
text-decoration: none;
}
.menu ul li:hover {
background-color: cyan;
color: white;
}
.menu ul li:hover a {
color: white;
}
div .homePage {
line-height: 30px;
height: 30px;
width: 100%;
border-bottom: 1px solid black;
position: absolute;
top: 0;
/* left:250px; */
overflow: hidden;
}
div p {
margin: 0 20px;
}
div .container-fluid {
position: relative;
width: 100%;
height: 100%;
padding-top: 30px;
padding-bottom: 100px;
box-sizing: border-box;
padding-left:0;
}
.creator {
position: absolute;
bottom: 10%;
right: 5%;
}
.lower-right .pages {
position: absolute;
right: 3%;
height: 50px;
bottom: 3%;
}
.pages ul {
/* float: right; */
list-style-type: none;
/* margin-right: 100px; */
}
.pages ul li {
float: left;
margin: 10px;
}
</style>
</body>
</html>
292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
