前端练习 静态网页（二）：图片排列
前文：前端练习 静态网页（一）：导航栏
文章目录
- 一 顶部图片
- 二 主体部分
- 2.1 主体文字内容
- 2.2 图片部分
- 附录
- 行内元素与块级元素
- 到2-3部分为止全部代码
一 顶部图片
当添加下方的图片资源时，出现了资源重叠的问题
<div>
<a href="#"><img src="images/top.png"/>a>
div>
注意到，这里问题的产生原因是：我在上方导航栏div中设置的定位方式是fix。把这个定位方式删除掉，即可。
.nav {
/*略*/
position: fixed;
}
然后将图片拉伸，将页面宽度填满
.top img{
width: 100%;
}
二 主体部分
2.1 主体文字内容
- 注意点1：文字右移
- 注意点2：主体部分变窄
/* 主体内容部分 */
div.body {
margin-left: var(--body_lineMargin);
margin-right: var(--body_lineMargin);
/* 字体 */
font-family: var(--body_fontTypeface);
font-size: var(--body_fontSize);
font-weight: var(--body_fontWeight);
}
p.subtitle {
width: 100%;
text-align: right;
}
.left {
float: left;
}
.right {
float: right;
}
<div class="body">
<p class="subtitle right">The infrastructure 基础架构p>
<div>
<a href="#"><img class="nogap" src="images/FWQ.png" />a>
div>
<div>
<a href="#"><img class="nogap" src="images/LYJH.png" />a>
div>
div>
2.2 图片部分
容易的发现的，图片没法按照我们预期的方式排列，同时图片有缝隙
解决方案：用排列方式解决，左边图片靠左排列，右边图片向右排列即可
<div class="infrastructure">
<p class="subtitle right">The infrastructure 基础架构p>
<div>
<a href="#"><img class="left" src="images/FWQ.png" />a>
<a href="#"><img class="right" src="images/LYJH.png" />a>
<a href="#"><img class="left" src="images/XNH.png" />a>
<a href="#"><img class="right" src="images/GDCP2.png" />a>
div>
div>
<div class="security">
<p class="subtitle left">Information security 信息安全p>
<div>
<a href="#"><img class="left" src="images/NWAQ.png" />a>
<a href="#"><img class="right" src="images/YAQ.png" width="395px" height="481px" />a>
<a href="#"><img class="left" src="images/WWAQ.png" />a>
<a href="#"><img class="right" src="images/GDCP.png" />a>
div>
div>
附录
行内元素与块级元素
行内元素和块级元素的区别：
| 块级元素 | 行内元素 |
|---|---|
| 独占一行,默认情况下，其宽度自动填满其父元素宽度 | 相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化 |
| 可以设置width，height属性 | 行内元素设置width，height属性无效；（行内元素垂直居中教程） |
| 可以设置margin和padding属性 | 行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果。 |
| 对应于display:block | 对应于display:inline |
到2-3部分为止全部代码
<html>
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css">
head>
<body>
<div class="nav">
<ul id="navigator">
<li class="logo"><img src="./images/logo.png">li>
<li>
<input type="submit" value="登录">li>
<li><a href="# ">个人中心a>li>
<li><a href="# ">在线商城a>li>
<li><a href="# ">关于我们a>li>
<li><a href="# ">天恒智家a>li>
<li><a href="# ">天恒网络a>li>
<li class="selected"><a href="# ">首页a>li>
ul>
div>
<div class="top">
<a href="#"><img src="images/top.png" />a>
div>
<div class="body">
<div class="infrastructure">
<p class="subtitle right">The infrastructure 基础架构p>
<div>
<a href="#"><img class="left" src="images/FWQ.png" />a>
<a href="#"><img class="right" src="images/LYJH.png" />a>
<a href="#"><img class="left" src="images/XNH.png" />a>
<a href="#"><img class="right" src="images/GDCP2.png" />a>
div>
div>
<div class="security">
<p class="subtitle left">Information security 信息安全p>
<div>
<a href="#"><img class="left" src="images/NWAQ.png" />a>
<a href="#"><img class="right" src="images/YAQ.png" width="395px" height="481px" />a>
<a href="#"><img class="left" src="images/WWAQ.png" />a>
<a href="#"><img class="right" src="images/GDCP.png" />a>
div>
div>
div>
<script src="myJavaScript.js">script>
body>
html>
:root {
--page_lineMargin: 150px;
/* 导航栏部分 */
--nav_height: 60px;
--nav_logoMarginLeft: 10%;
--nav_logoMarginTop: 10px;
--nav_textWidth: 110px;
--nav_loginMarginTop: 10%;
--nav_backgroudColor: rgb(237, 240, 245);
--nav_selectColor: rgb(46, 158, 253);
--nav_fontSize: 16px;
--nav_fontTypeface: FangSong;
--nav_fontWeight: bold;
/* 主体内容部分 */
--body_lineMargin: 199px;
/* 子标题字体 */
--body_Subtitle_fontTypeface: FangSong;
--body_Subtitle_fontSize: 28px;
--body_Subtitle_fontWeight: bold;
}
.left {
float: left;
}
.right {
float: right;
}
div.nav {
/* 行内元素垂直居中*/
height: var(--nav_height);
line-height: var(--nav_height);
text-align: center;
background-color: var(--nav_backgroudColor);
}
.nav ul {
width: auto;
list-style-type: none;
white-space: nowrap;
margin-right: 10%;
padding: 0;
}
.nav li {
/* 使li内容横向浮动，即横向排列 */
float: right;
position: relative;
}
.nav li a {
margin-right: 2%;
/* 设置链接内容显示的格式*/
/* 把链接显示为块元素可使整个链接区域可点击 */
display: block;
color: black;
/* 去除下划线 */
text-decoration: none;
width: var(--nav_textWidth);
/* 字体 */
font-family: var(--nav_fontTypeface);
font-size: var(--nav_fontSize);
font-weight: var(--nav_fontWeight);
}
.nav li a:hover {
/* 鼠标选中时背景颜色 */
background-color: var(--nav_selectColor);
}
body {
background: #eff3f5;
margin-right: var(--page_lineMargin);
margin-left: var(--page_lineMargin);
}
/* logo：设置位置、留白 */
li.logo {
float: left;
margin-left: var(--nav_logoMarginLeft);
margin-top: var(--nav_logoMarginTop);
position: relative;
}
/* 登录框，设置字体、边框*/
.nav li input {
/* 边框 */
border-color: rgb(76, 178, 252);
border-style: ridge;
border-width: 1px;
color: rgb(76, 178, 252);
/* 定位 */
padding-left: 15px;
padding-right: 15px;
margin-left: 35px;
/* 字体 */
font-family: var(--nav_fontTypeface);
font-size: var(--nav_fontSize);
font-weight: var(--nav_fontWeight);
}
/* 被选中栏目的样式 */
li.selected {
background-color: var(--nav_selectColor);
}
.top img {
width: 100%;
}
/* 主体内容部分 */
div.body {
margin-left: var(--body_lineMargin);
margin-right: var(--body_lineMargin);
}
/* 基础架构部分 */
div.body div.infrastructure {
/* 字体 */
font-family: var(--body_Subtitle_fontTypeface);
font-size: var(--body_Subtitle_fontSize);
font-weight: var(--body_Subtitle_fontWeight);
}
div.infrastructure p.subtitle {
width: 100%;
text-align: right;
}
div.body div.security {
/* 字体 */
font-family: var(--body_Subtitle_fontTypeface);
font-size: var(--body_Subtitle_fontSize);
font-weight: var(--body_Subtitle_fontWeight);
}
div.security p.subtitle {
width: 100%;
text-align: left;
}
var list = document.getElementById("navigator");
console.log("list中包含" + list.childElementCount + "个元素");
var nodes = list.childNodes;
for (let i = 0; i < nodes.length; i++) {
if (i === 0 || i === 1) {
// 为什么login没有跳过去？
} else {
let liNode = nodes[i];
bindClick(liNode);
}
}
/*注册绑定事件*/
function bindClick(node) {
node.onclick = function () {
// 还原非选中项
for (let i = 0; i < nodes.length; i++) {
if (i === 0 || i === 1) {
// 如果是logo和login，则不需要清空属性
} else {
console.log("test");
let clearNode = nodes[i];
clearNode.className = ' ';
}
}
node.className = 'selected';
}
}