《个人学习笔记十六》
超链接图片排列练习：
方法一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片排列</title>
<link rel="stylesheet" href="./CSS/reset.css">
<style>
/* 设置背景颜色，便于观察*/
body {
background-color: pink;
}
/* 设置ul的大小
使其居中便于观察
背景颜色
隐藏溢出 */
.picture-list {
width: 190px;
height: 460px;
margin: 50px auto;
background-color: rgb(228, 231, 31);
overflow: hidden;
}
/* 设置每个图片下面边距 */
li {
margin-bottom: 14px;
}
/* 设置每个图片大小 */
.picture-list img {
width: 190px;
height: 140px;
}
</style>
</head>
<body>
<ul class="picture-list">
<li>
<a href="https://blog.csdn.net/qq_45623543/article/details/109656655"> <img src="./picture/01/1.jpg" alt=""></a>
</li>
<li>
<a href="javascript:;"><img src="./picture/01/2.jpg" alt=""></a>
</li>
<li>
<a href="javascript:;"><img src="./picture/01/3.jpg" alt=""></a>
</li>
</ul>
</body>
</html>
浏览器显示结果：
方法二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片排列</title>
<link rel="stylesheet" href="./CSS/reset.css">
<style>
body {
background-color: rgb(241, 158, 158);
}
div {
height: 460px;
width: 190px;
background-color: rgb(46, 10, 131);
margin: 50px auto;
}
div img {
height: 140px;
width: 190px;
margin-bottom: 14px;
}
</style>
</head>
<body>
<div>
<a href="https://blog.csdn.net/qq_45623543/article/details/109656655"><img src="./picture/01/1.jpg" alt=""></a>
<a href="javascript:;"><img src="./picture/01/2.jpg" alt=""></a>
<a href="javascript:;"><img src="./picture/01/3.jpg" alt=""></a>
</div>
</body>
</html>
浏览器显示结果：
导航条练习：
注意：导航条样式模仿于W3shool
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="CSS/reset.css">
<style>
/*
设置最外围ul的高度宽度
ui背景颜色
使其居中
*/
.nav {
width: 1210px;
height: 48px;
background-color: #E8E7E3;
margin: 100px auto;
}
/* 设置无序排列
向左浮动
每一行的高度（使上下居中）
*/
li {
float: left;
line-height: 48px;
}
/*
把超链接改为块元素
删除超链接文本下划线
设置超链接颜色
字体大小
内边距
*/
a {
display: block;
text-decoration: none;
color: #777777;
font-size: 18px;
padding: 0 42px;
}
/*
因为模仿的W3Shool的导航条，为了用简单的代码还原，保留原宽度，需要改变最后一个元素的宽度
*/
li:last-child a {
padding: 0 44px 0 45px
}
/*
超链接背景颜色
选中后字体的颜色
*/
a:hover {
background-color: #3f3f3F;
color: #E8E7E3;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="https://blog.csdn.net/qq_45623543/article/details/109656655">HTML/CSS</a>
</li>
<li>
<a href="#">Browser Side</a>
</li>
<li>
<a href="#">Sever side</a>
</li>
<li>
<a href="#">Programming</a>
</li>
<li>
<a href="#">XML</a>
</li>
<li>
<a href="#">Web Building</a>
</li>
<li>
<a href="#">Rnference</a>
</li>
</ul>
</body>
</html>
浏览器显示结果：
侧边导航练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>左侧导航</title>
<style>
/* 背景颜色，便于观察，可不要 */
body {
background-color: rgb(30, 207, 169);
}
/* 设置nav的大小
背景颜色
使其居中便于设计 */
.text1 {
width: 190px;
height: 450px;
padding: 10px 0;
background-color: #fff;
margin: 50px auto;
}
/* 设置div高度
与第二个标签配合使文本更好的居中
两者经常连用
设置左内边距 */
.text2 {
height: 25px;
line-height: 25px;
padding-left: 18px;
}
/* 设置每一行超链接文本被选中后的颜色 */
.text2:hover {
background-color: #d9d9d9;
}
/* 超链接文本颜色
字体大小
去掉下划线 */
a {
color: black;
font-size: 14px;
text-decoration: none;
}
/* 超链接被选中后的颜色 */
a:hover {
color: red;
}
/* 设置“/”的样式 */
span {
padding: 0 2px;
font-size: 12px;
}
</style>
</head>
<body>
<nav class="text1">
<div class="text2">
<a href="https://blog.csdn.net/qq_45623543/article/details/109656655">家用电器</a>
</div>
<div class="text2">
<a href="#">手机</a><span class="em">/</span><a href="#">运营商</a><span class="em">/</span><a href="#">数码</a>
</div>
<div class="text2"><a href="#">电脑</a><span class="em">/</span><a href="#">办公</a>
</div>
<div class="text2">
<a href="#">家居</a><span class="em">/</span><a href="#">家具</a><span class="em">/</span><a href="#">家装</a><span class="em">/</span><a href="#">厨具</a>
</div>
<div class="text2">
<a href="#">男装</a><span class="em">/</span><a href="#">女装</a><span class="em">/</span><a href="#">童装</a><span class="em">/</span><a href="#">内衣</a>
</div>
<div class="text2"><a href="#">美妆</a><span class="em">/</span><a href="#">个护清洁</a><span class="em">/</span><a href="#">宠物</a>
</div>
<div class="text2">
<a href="#">女鞋</a><span class="em">/</span><a href="#">箱包</a><span class="em">/</span><a href="#">钟表</a><span class="em">/</span><a href="#">珠宝</a>
</div>
<div class="text2">
<a href="#">男鞋</a><span class="em">/</span><a href="#">运动</a><span class="em">/</span><a href="#">户外</a>
</div>
<div class="text2">
<a href="#">房产</a><span class="em">/</span><a href="#">汽车</a><span class="em">/</span><a href="#">汽车用品</a>
</div>
<div class="text2">
<a href="#">母婴</a><span class="em">/</span><a href="#">玩具乐器</a>
</div>
<div class="text2">
<a href="#">食品</a><span class="em">/</span><a href="#">酒类</a><span class="em">/</span><a href="#">生鲜</a><span class="em">/</span><a href="#">特产</a>
</div>
<div class="text2">
<a href="#">艺术</a><span class="em">/</span><a href="#">礼品鲜花</a><span class="em">/</span><a href="#">农资绿植</a>
</div>
<div class="text2">
<a href="#">医药保健</a><span class="em">/</span><a href="#">计生情趣</a>
</div>
<div class="text2">
<a href="#">图书</a><span class="em">/</span><a href="#">文娱</a><span class="em">/</span><a href="#">电子书</a>
</div>
<div class="text2">
<a href="#">机票</a><span class="em">/</span><a href="#">酒店</a><span class="em">/</span><a href="#">旅游</a><span class="em">/</span><a href="#">生活</a>
</div>
<div class="text2">
<a href="#">理财</a><span class="em">/</span><a href="#">众筹</a><span class="em">/</span><a href="#">白条</a><span class="em">/</span><a href="#">保险</a>
</div>
<div class="text2">
<a href="#">安装</a><span class="em">/</span><a href="#">维修</a><span class="em">/</span><a href="#">清洗</a><span class="em">/</span><a href="#">二手</a>
</div>
<div class="text2">
<a href="#">工业品</a>
</div>
</nav>
</body>
</html>
浏览器显示结果：
网易新闻练习：
注意：样式借鉴于网易新闻侧面推荐新闻
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网易新闻练习</title>
<link rel="stylesheet" href="./CSS/reset.css">
<style>
/*做的时候先给body背景换一下方便做，做完了便于观察可以再注释掉*/
body {
background-color: aquamarine;
}
/* 首先从上往下做，先调节div的大小，设置背景颜色，为了便于观察把div居中（当然这里是自愿也可以不这样。为其设置一个上边框 */
.text-title {
height: 358px;
width: 300px;
background-color: #fff;
margin: 50px auto;
border-top: solid 1px #E7E7E7;
}
/* 设计“军事·航空" 设置高度 字体加粗*/
/* 设置这四个字上面的红线
首先把块元素改为行内块元素
在设置上边框
因为要与div上边框重叠所以上外边框设置为-1px
*/
.title1 {
height: 40px;
font-weight: bold;
display: inline-block;
border-top: solid 1px red;
margin-top: -1px;
}
/* 设置图像高度防止下面的文字因“俄武直造导弹命中爆出巨大火球”这句话位置改变而变 */
img {
height: 150px;
}
/* 设置“俄武直造导弹命中爆出巨大火球 *首先文本居中，
然后通过设置上外边框往上移动
字体颜色
字体加粗*/
.title2 {
text-align: center;
margin-top: -30px;
color: white;
font-weight: bold;
}
/* 这里将所有超链接的选中字体改为红色 */
a:hover {
color: red;
}
/* 设置超链接的颜色
去掉下划线 */
a {
color: black;
text-decoration: none;
}
/* 这里是为了摆正下面新闻标题的位置 */
ul {
margin-top: 30px;
}
/* 这里设置最下面四个标题样式
改为块元素方便修改上下边距
修改字体大小、颜色 */
li a {
display: block;
padding-bottom: 10px;
font-size: 14px;
color: #677189;
}
/* 最后面四条标题每一个前面都有一个方点。用伪元素设置 */
li a::before {
content: "■";
color: #DDDDDD;
font-size: 2px;
}
</style>
</head>
<body>
<div class="text-title">
<a href="#">
<h3 class="title1">军事·航空</h3>
</a>
<a href="https://news.163.com/">
<img src="./picture/03/3b2058bbj00qjk3pp002wc000s600e3c.webp" alt="">
<h4 class="title2">俄武直造导弹命中爆出巨大火球</h4>
</a>
<ul>
<li>
<a href="https://blog.csdn.net/qq_45623543/article/details/109656655"> 飞行员的救星，美国装备新型救援直升机</a>
</li>
<li>
<a href="#"> 细节无可挑剔！俄罗斯军队重演保卫莫斯科</a>
</li>
<li>
<a href="#"> SpaceX第二次载人发射在本周末升空</a>
</li>
<li>
<a href="#"> 航拍江西仙女湖风光 云雾缭绕如山水画卷</a>
</li>
</ul>
</div>
</body>
</html>
浏览器显示结果：
补充：
上面图片里添加文字并组成链接，那是为没学过背景图片设置的人准备的
下面是通过将图片设计为背景，以此来添加文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
height: 150px;
width: 300px;
background-image: url(./picture/03/3b2058bbj00qjk3pp002wc000s600e3c.webp);
margin: 100px auto;
}
h4 {
color: white;
text-align: center;
line-height: 150px;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<h4>俄武直造导弹命中爆出巨大火球</h4>
</div>
</body>
</html>
浏览器显示结果：
