网页实现

科技2022-08-14 103

实现如下图所示的一个网页：网页的内容撑满整个网页。注意：撑满绝不能设定宽和高为一个具体的数字，应该用百分比即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">   <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>   </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>

Processed: 0.019, SQL: 8