html 入门学习
参考资料:https://www.cnblogs.com/gh110/p/15153664.html
参考视频:https://www.bilibili.com/video/BV1x4411V75C
扩展:
- qq 邮箱扩展(点击联系我)可以打开 qq 推广弄
- iframe 可以作为 a 标签的目标,然后一键点击跳转!
- 点文字就可以锁定文字对应的框
- 表单的应用
- 隐藏域 hidden
只读 readonly
禁用 disabled
- 隐藏域 hidden
- 表单初级验证-常用方式(表单元素的几个属性)
- placeholder 提示信息
- required 非空判断
- pattern 正则表达式
CSS 入门学习
参考视频:https://www.bilibili.com/video/BV14J4114768/
参考资料:https://www.cnblogs.com/gh110/p/15153662.html
扩展:
- 渐变色网站:https://www.grabient.com/
- 虚线:border: 1px dashed #b27536
- 关于浮动、定位、动画建议在参考视频学习。狂神的不推荐。
- 图片上的都需要了解
1.实现阴影效果,文本阴影,边框阴影,图片阴影
<!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>css实现阴影效果</title>
<style>
h1 {
color: pink;
text-shadow: 3px 3px 5px rgb(25, 19, 19);
}
.d1 {
width: 300px;
height: 300px;
background-color: aquamarine;
box-shadow: 10px 10px 5px rgb(143, 137, 137);
}
.d2 {
width: 300px;
height: 300px;
}
.d2 img {
/* 设置图片大小自适应,宽度占满div 高度自适应调整 */
width: 100%;
height: auto;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
/*考虑浏览器兼容性*/
-moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<p>文本阴影</p>
<h1>Hello world</h1>
<p>边框阴影</p>
<!-- 语法 :box-shadow: h-shadow v-shadow blur spread color inset; -->
<div class="d1"></div>
<p>图像阴影</p>
<div class="d2">
<img src="1.jpg" />
</div>
</body>
</html>
效果:
知识点
1、添加文本阴影
语法:
text-shadow: h-shadow v-shadow blur color;
属性值:
- h-shadow:设置水平阴影的位置,允许负值。
● v-shadow:设置垂直阴影的位置,允许负值。
● blur:设置模糊的距离。
● color:设置阴影的颜色。
2.添加边框(图像)阴影
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
属性值:
● h-shadow:设置水平阴影的位置,允许负值;必需值,不可省略。
● v-shadow:设置垂直阴影的位置,允许负值;必需值,不可省略。
● blur:设置模糊距离;可选值,可省略。
● spread:设置阴影的大小;可选值,可省略。
● color:设置阴影的颜色;可选值,可省略。
● inset:设置从外层的阴影(开始时)改变阴影内侧阴影;可选值,可省略。
2.实现网站自动播放背景音乐
<audio autoplay="autoplay" controls="controls" loop="loop" preload="auto">
<source src="BLACKPINK - Last Christmas (Live).mp3" />
</audio>
<!-- <embed src="BLACKPINK - Last Christmas (Live).mp3" hidden="true"/> -->
<!-- <bgsound src="绝对地址" autostart=true loop=infinite></bgsound> -->
这三个都是。不一样的是,前两个可以填相对路径,后边一个只能填绝对路径。
audio 知识点
1、使用 autoplay="autoplay",则背景音乐将在音网页打开后就自动马上播放。
2、使用 controls="controls",则为了在页面内显示显示控件,如播放按钮。
3、使用"loop="loop",则是为了是背景音乐重复播放。
4、使用 preload="auto",则音频在页面加载的同时进行加载,并预备播放。
5、使用 src="",即是在""内加入背景音乐的保存路径,如:src="web 网页制作\03.mp3"。
注:若是想播放按钮隐藏,则使用以下语句:
直接使用 css 的 display 控制 audio 标签的显示:
<style type="text/css">
audio {
display: none;
}
</style>
embed 知识点
1、src="",在""内添加你音乐的保存路径。
2、使用 hidden="true"表示隐藏音乐播放按钮,相反使用 hidden="false"表示开启音乐播放按钮。
3、使用 autostart="true" 表示是打开网页加载完后自动播放。
4、使用 loop="true"表示 循环播放 如仅想播放一次则为:loop="false"
bground 知识点
1、使用 autostart=true,表示音乐在网页加载同时加载音乐,打开网页时音乐自动播放。
bug : 网页无法实现自动播放!
原因:浏览器没有开放自动播放的权限
- Google 浏览器
- edge 浏览器
测试例子
<!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>Merry Christmas</title>
<style>
.a1{
text-align: center;
}
.a2{
color: red;
}
audio{
display: none;
}
</style>
</head>
<body>
<div class="a1">
<p><h1>给小乖的圣诞树!</h1></p>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_gif%2FpWGfdXBicbhxicLv3kZRFPhp9zFd53JOfvLcvlyyfEOsT70SIgpBPurXVq5475FaZ82XU6YLAnh1ncpaTuXJElpQ%2F0%3Fwx_fmt%3Dgif&refer=http%3A%2F%2Fmmbiz.qpic.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673697133&t=27473eb53f19f8e29a91e0ba518b4c87">
<p><h1 class="a2">Merry Christmas !!!</h1></p>
</div>
<audio autoplay="autoplay" controls="controls"loop="loop" preload="auto">
<source src="BLACKPINK - Last Christmas (Live).mp3">
</audio>
<!-- <embed src="BLACKPINK - Last Christmas (Live).mp3" hidden="true"/> -->
<!-- <bgsound src="绝对地址" autostart=true loop=infinite></bgsound> -->
</body>
</html>
-
页面结构:
-
实现效果:(可以听到背景音乐的自动播放哦!)
3.实现图文列表左右布局,居中,全局页面缩放等
图文列表
<!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>
<style>
.header {
text-align: center;
line-height: 200px;
height: 190px;
width: 1135px;
border: 2px solid rgba(253, 161, 14, 0.881);
}
.main-min {
/* border: 2px solid rgba(253, 161, 14, 0.881); */
width: 665px;
height: 860px;
/* margin: 0 auto; */
}
.m {
width: 660px;
height: 250px;
/* border: 2px solid rgba(253, 161, 14, 0.881); */
margin-bottom: 25px;
margin-top: 25px;
}
.footer {
line-height: 200px;
margin-top: 50px;
text-align: center;
height: 200px;
width: 100%;
border: 2px solid rgba(253, 161, 14, 0.881);
}
.img {
float: left;
width: 250px;
height: 250px;
border: 2px solid rgba(253, 161, 14, 0.881);
text-align: center;
margin: auto 0;
display: block;
margin-left: 5px;
margin-right: 5px;
}
.img img {
background-image: no-repeat;
background-size: cover;
width: 250px;
height: 100%;
/* display:flex; */
align-items: center;
justify-content: center;
border: 1px solid rgb(250, 238, 7);
}
.text {
text-align: center;
line-height: 250px;
border: 2px solid rgba(253, 161, 14, 0.881);
float: left;
width: 375px;
height: 250px;
font-size: 24px;
margin-left: 5px;
margin-right: 5px;
}
.navigation {
height: 100px;
width: 1135px;
border: 2px solid rgba(253, 161, 14, 0.881);
}
li {
float: left;
margin-right: 10px;
font-size: h1;
}
</style>
</head>
<body>
<div
style="height: 1700px; width: 1135px; border: 2px solid rgba(253, 161, 14, 0.881);"
>
<div class="header">
<h1>HEADER</h1>
</div>
<div class="navigation">
<ul style="margin: 0; list-style-type:none;">
<a href="lp01.html"
><li><h1>PAGE 1</h1></li></a
>
<a href="lp01 copy.html"
><li><h1>PAGE 2</h1></li></a
>
<a href="lp01 copy 2.html"
><li><h1>PAGE 3</h1></li></a
>
</ul>
</div>
<div
class="main"
style="width: 1135px; height: 1150px; display:flex; justify-content: center; align-items: center;"
>
<div class="main-min">
<div class="m">
<div class="img">
<img src="1.jpg" alt="图片" />
</div>
<div class="text">
<h1>text</h1>
</div>
</div>
<div class="m">
<div class="text">
<h1>text</h1>
</div>
<div class="img">
<img src="2.jpg" alt="图片" />
</div>
</div>
<div class="m">
<div class="img" alt="图片">
<img src="1.jpg" />
</div>
<div class="text">
<h1>text</h1>
</div>
</div>
</div>
</div>
<div class="footer">
<h2>Student Name, Student ID</h2>
</div>
<script>
document.body.style.zoom = '33%';
</script>
</div>
</body>
</html>
内容 div 居中
<!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>
<style>
.header {
text-align: center;
line-height: 200px;
height: 190px;
width: 1135px;
border: 2px solid rgba(253, 161, 14, 0.881);
}
.main-min {
border: 2px solid rgba(253, 161, 14, 0.881);
width: 1035px;
height: 960px;
font-size: 48px;
/* margin: 0 auto; */
}
.footer {
/* line-height: 200px; */
margin-top: 50px;
/* text-align: center; */
height: 200px;
width: 100%;
/* font-size: 30px; */
border: 2px solid rgba(253, 161, 14, 0.881);
}
.text {
text-align: center;
line-height: 250px;
border: 2px solid rgba(253, 161, 14, 0.881);
float: left;
width: 375px;
height: 250px;
font-size: 24px;
margin-left: 5px;
margin-right: 5px;
}
.navigation {
height: 100px;
width: 1135px;
border: 2px solid rgba(253, 161, 14, 0.881);
}
li {
float: left;
margin-right: 10px;
font-size: h1;
}
</style>
</head>
<body>
<div
style="height: 1700px; width: 1135px; border: 2px solid rgba(253, 161, 14, 0.881);"
>
<div class="header">
<h1>HEADER</h1>
</div>
<div class="navigation">
<ul style="margin: 0; list-style-type:none;">
<a href="lp01.html"
><li><h1>PAGE 1</h1></li></a
>
<a href="lp01 copy.html"
><li><h1>PAGE 2</h1></li></a
>
<a href="lp01 copy 2.html"
><li><h1>PAGE 3</h1></li></a
>
</ul>
</div>
<div
class="main"
style="width: 1135px; height: 1150px; display:flex; justify-content: center; align-items: center;"
>
<div class="main-min">content</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
<script>
document.body.style.zoom = '33%';
</script>
</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>
<style>
.header {
text-align: center;
line-height: 200px;
height: 190px;
width: 1135px;
border: 2px solid rgba(253, 161, 14, 0.881);
}
.main-min {
border: 2px solid rgba(253, 161, 14, 0.881);
width: 600px;
height: 600px;
/* margin: 0 auto; */
/* text-align: center; */
line-height: 70px;
font-size: 24px;
}
.main-min span {
font-size: 48px;
text-align: center;
margin-top: 50px;
display: block;
}
.main-min input {
height: 25px;
width: 280px;
font-size: 24px;
}
.main-min .message {
height: 100px;
display: block;
margin-top: 28px;
margin-bottom: 0;
}
.main-min button {
width: 100px;
height: 30px;
display: block;
float: right;
margin-right: 10px;
margin-top: -41px;
}
.footer {
line-height: 200px;
margin-top: 50px;
text-align: center;
height: 200px;
width: 100%;
border: 2px solid rgba(253, 161, 14, 0.881);
}
.text {
text-align: center;
line-height: 250px;
border: 2px solid rgba(253, 161, 14, 0.881);
float: left;
width: 375px;
height: 250px;
font-size: 24px;
margin-left: 5px;
margin-right: 5px;
}
.navigation {
height: 100px;
width: 1135px;
border: 2px solid rgba(253, 161, 14, 0.881);
}
li {
float: left;
margin-right: 10px;
font-size: h1;
}
</style>
</head>
<body>
<div
style="height: 1700px; width: 1135px; border: 2px solid rgba(253, 161, 14, 0.881);"
>
<div class="header">
<h1>HEADER</h1>
</div>
<div class="navigation">
<ul style="margin: 0; list-style-type:none;">
<a href="lp01.html"
><li><h1>PAGE 1</h1></li></a
>
<a href="lp01 copy.html"
><li><h1>PAGE 2</h1></li></a
>
<a href="lp01 copy 2.html"
><li><h1>PAGE 3</h1></li></a
>
</ul>
</div>
<div
class="main"
style="width: 1135px; height: 1150px; display:flex; justify-content: center; align-items: center;"
>
<div class="main-min">
<form action="">
<span>Contact US!</span><br />
<div>
<div style="width:30% ;float: left; margin-left: 100PX;">
Name<br />eMail<br />Message<br />
</div>
<div style="width:50%; float: left;">
<input type="text" /><br /><input type="text" /><br /><input
class="message"
type="text"
/><br />
<button type="submit">Send</button>
</div>
</div>
<!-- Name <input type="text"><br/>
eMail <input type="text"><br/>
Message <input class="message" type="text"> <br/> -->
<!-- <button type="submit">Send</button> -->
</form>
</div>
</div>
<div class="footer">
<h2>Student Name, Student ID</h2>
</div>
<script>
document.body.style.zoom = '33%';
</script>
</div>
</body>
</html>
4.html 实现头部的 a 标签超链接
只需要在头部的 head 标签里加上这个即可
<head>
<title>Question3</title>
<nav>
<a href="Question 1/Question 1.html"><b>Question 1</b></a>
<a href="Question 2/Question 2.html"><b>Question 2</b></a>
<a href="Question3.html"><b>Question 3</b></a>
<a href="Question4.html"><b>Question 4</b></a>
</nav>
</head>
5.做个计算器(有最大值最小值和归零)
几个知识点
- 漂亮的导航栏
- 漂亮的配色
- 放大/缩小 div 元素
- 放大/缩小整个页面
<!DOCTYPE html>
<head>
<title>JavaScript</title>
<style>
body {
/* 漂亮的浅粉色 */
background-color:rgb(255, 237, 249);
}
/* nav */
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-weight: 520;
font-family: Times New Roman;
}
#nav {
width: 1137px;
height: 72px;
background-color: rgb(188, 255, 249, 0.4);
border-radius: 20px;
margin: 20px auto;
}
#nav>ul>li {
float: left;
width: 175.75px;
height: 72px;
text-align: center;
color: lightblue;
}
#nav>ul>li>a {
text-align: center;
line-height: 72px;
font-size: 20px;
color: grey;
}
#nav>ul>li>a:hover {
color: navy;
}
ul>span {
float: left;
line-height: 72px;
color: rgb(225, 224, 224);
font-weight: 800;
font-size: 24px;
}
#nav>ul>li>.a1 {
color: #FF0036;
}
#nav>ul>li>.a2 {
color: rgb(101, 198, 58);
}
/* Calculator */
input{
width: 190px;
}
table{
margin: 0 auto;
}
.d1{
margin-top: 150px;
/* div实现放大/缩小 */
transform:scale(2);
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="Home.html" class="a1">Home Page</a></li><span>|</span>
<li><a href="Travel and exploration.html" class="a1">Travel and Explore</a></li><span>|</span>
<li><a href="Memory.html" class="a2">Memory Page</a></li><span>|</span>
<li><a href="Contact us.html">Contact Us</a></li><span>|</span>
<li><a href="About us.html">About Us</a></li><span>|</span>
<li><a href="JavaScript.html">JavaScript</a></li>
</ul>
</div>
<div class="d1">
<table border="1" cellspacing="0" >
<tr><th colspan="2">Calculator</th></tr>
<tr>
<td>First number</td>
<td><input type="text" id="inputId1" /></td>
</tr>
<tr>
<td>Second number</td>
<td><input type="text" id="inputId2" /></td>
</tr>
<tr>
<td>Third number</td>
<td><input type="text" id="inputId3" /></td>
</tr>
<tr>
<td>
<button type="button"onclick="cal('AC')" style="background-color: #FFB90F;">AC</button>
</td>
<td>
<button type="button" onclick="cal('+')" >+</button>
<button type="button" onclick="cal('-')" >-</button>
<button type="button" onclick="cal('*')" >*</button>
<button type="button" onclick="cal('/')" >/</button>
<button type="button" onclick="cal('max')" style="background-color: hwb(85 10% 2%);">max</button>
<button type="button" onclick="cal('min')" style="background-color: hwb(111 32% 4%);">min</button>
</td>
</tr>
<tr>
<td>Results</td>
<td><input type="text" id="resultId"/></td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
function cal(type){
var num1 = document.getElementById('inputId1');
var num2 = document.getElementById('inputId2');
var num3 = document.getElementById('inputId3');
// 对于num1.value,是获得输入框的值,
//然后parseInt,是转换成Int类型的数据,进行运算
var result;
switch(type){
case '+':
result = parseInt(num1.value) + parseInt(num2.value) + parseInt(num3.value);
break;
case '-':
result = parseInt(num1.value) - parseInt(num2.value) - parseInt(num3.value);
break;
case '*':
result = parseInt(num1.value) * parseInt(num2.value) * parseInt(num3.value);
break;
case '/':
result = parseInt(num1.value) / parseInt(num2.value) / parseInt(num3.value);
break;
case 'AC':
// 清空几个框框的值
result = null;
num1.value=null;
num2.value=null;
num3.value=null;
break;
case 'max':
result = Math.max(num1.value,num2.value,num3.value);
break;
case 'min':
result = Math.min(num1.value,num2.value,num3.value);
break;
}
//清空结果框框的值
var resultObj = document.getElementById('resultId');
resultObj.value = result;
}
// 整个html页面的放大/缩小
document.body.style.zoom="120%"
</script>
</html>
效果
6.漂亮的居中表单
实现
<!DOCTYPE html>
<head>
<title>JavaScript</title>
<style>
body {
/* 漂亮的浅粉色 */
background-color:rgb(255, 237, 249);
}
/* nav */
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-weight: 520;
font-family: Times New Roman;
}
#nav {
width: 1137px;
height: 72px;
background-color: rgb(188, 255, 249, 0.4);
border-radius: 20px;
margin: 20px auto;
}
#nav>ul>li {
float: left;
width: 175.75px;
height: 72px;
text-align: center;
color: lightblue;
}
#nav>ul>li>a {
text-align: center;
line-height: 72px;
font-size: 20px;
color: grey;
}
#nav>ul>li>a:hover {
color: navy;
}
ul>span {
float: left;
line-height: 72px;
color: rgb(225, 224, 224);
font-weight: 800;
font-size: 24px;
}
#nav>ul>li>.a1 {
color: #FF0036;
}
#nav>ul>li>.a2 {
color: rgb(101, 198, 58);
}
/* Calculator */
input{
width: 190px;
}
table{
margin: 0 auto;
}
.d1{
margin-top: 150px;
/* div实现放大/缩小 */
transform:scale(2);
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="Home.html" class="a1">Home Page</a></li><span>|</span>
<li><a href="Travel and exploration.html" class="a1">Travel and Explore</a></li><span>|</span>
<li><a href="Memory.html" class="a2">Memory Page</a></li><span>|</span>
<li><a href="Contact us.html">Contact Us</a></li><span>|</span>
<li><a href="About us.html">About Us</a></li><span>|</span>
<li><a href="JavaScript.html">JavaScript</a></li>
</ul>
</div>
<div class="d1">
<table border="1" cellspacing="0" >
<tr><th colspan="2">Calculator</th></tr>
<tr>
<td>First number</td>
<td><input type="text" id="inputId1" /></td>
</tr>
<tr>
<td>Second number</td>
<td><input type="text" id="inputId2" /></td>
</tr>
<tr>
<td>Third number</td>
<td><input type="text" id="inputId3" /></td>
</tr>
<tr>
<td>
<button type="button"onclick="cal('AC')" style="background-color: #FFB90F;">AC</button>
</td>
<td>
<button type="button" onclick="cal('+')" >+</button>
<button type="button" onclick="cal('-')" >-</button>
<button type="button" onclick="cal('*')" >*</button>
<button type="button" onclick="cal('/')" >/</button>
<button type="button" onclick="cal('max')" style="background-color: hwb(85 10% 2%);">max</button>
<button type="button" onclick="cal('min')" style="background-color: hwb(111 32% 4%);">min</button>
</td>
</tr>
<tr>
<td>Results</td>
<td><input type="text" id="resultId"/></td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
function cal(type){
var num1 = document.getElementById('inputId1');
var num2 = document.getElementById('inputId2');
var num3 = document.getElementById('inputId3');
// 对于num1.value,是获得输入框的值,
//然后parseInt,是转换成Int类型的数据,进行运算
var result;
switch(type){
case '+':
result = parseInt(num1.value) + parseInt(num2.value) + parseInt(num3.value);
break;
case '-':
result = parseInt(num1.value) - parseInt(num2.value) - parseInt(num3.value);
break;
case '*':
result = parseInt(num1.value) * parseInt(num2.value) * parseInt(num3.value);
break;
case '/':
result = parseInt(num1.value) / parseInt(num2.value) / parseInt(num3.value);
break;
case 'AC':
// 清空几个框框的值
result = null;
num1.value=null;
num2.value=null;
num3.value=null;
break;
case 'max':
result = Math.max(num1.value,num2.value,num3.value);
break;
case 'min':
result = Math.min(num1.value,num2.value,num3.value);
break;
}
//清空结果框框的值
var resultObj = document.getElementById('resultId');
resultObj.value = result;
}
// 整个html页面的放大/缩小
document.body.style.zoom="120%"
</script>
</html>
7.漂亮的几种背景色
body { /* 漂亮的浅黄色 */ background-color: rgb(255, 254, 232, 0.5); } body { /*
漂亮的浅粉色 */ background-color:rgb(255, 237, 249); } body { /* 漂亮的浅绿色 */
background-color:rgb(242, 242, 254); }
8.横向图文列表
<!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>Travel and Explore</title>
<style>
/* 导航栏样式 */
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-weight: 520;
font-family: 微软雅黑;
}
#nav {
width: 1137px;
height: 72px;
background-color: rgb(247, 249, 250);
border-radius: 20px;
margin: 20px auto;
}
#nav > ul > li {
float: left;
width: 175.75px;
height: 72px;
text-align: center;
}
#nav > ul > li > a {
text-align: center;
line-height: 72px;
font-size: 20px;
color: black;
}
#nav > ul > li > a:hover {
color: orange;
}
ul > span {
float: left;
line-height: 72px;
color: rgb(225, 224, 224);
font-weight: 800;
font-size: 24px;
}
#nav > ul > li > .a1 {
color: #ff0036;
}
#nav > ul > li > .a2 {
color: rgb(101, 198, 58);
}
/* 内容部分设置 */
.content-left {
float: left;
width: 20%;
margin-left: 29px;
/* border: 2px solid red; */
}
.content-left img {
width: 229px;
height: 437px;
}
.content-right {
float: left;
width: 75%;
/* border: 2px solid rgb(136, 197, 52); */
}
/* 对于ul和li的设置 */
.ul2 {
float: left;
display: block;
}
.ul2 li {
margin-left: 20px;
margin-right: 0;
margin-bottom: 20px;
background-color: #f5f5f5;
list-style: none;
float: left;
}
.ul2 li img {
width: 200px;
height: 188px;
padding-bottom: 20px;
}
.ul2 p {
width: 200px;
}
</style>
</head>
<body>
<!-- 导航栏的部分 -->
<div id="nav">
<ul>
<li><a href="Home.html" class="a1">首页</a></li>
<span>|</span>
<li><a href="Travel and exploration.html" class="a1">旅行与探索</a></li>
<span>|</span>
<li><a href="Memory.html" class="a2">记忆页面</a></li>
<span>|</span>
<li><a href="Contact us.html">联系页面</a></li>
<span>|</span>
<li><a href="About us.html">关于我们</a></li>
<span>|</span>
<li><a href="JavaScript.html">JavaScript</a></li>
</ul>
</div>
<!-- 内容部分 -->
<div class="content">
<div class="content-left">
<img src="dujia.jpg" alt="度假海报" />
</div>
<div class="content-right">
<ul class="ul2">
<a href="https://goo.gl/maps/cSDqS7axoVMB61xw7">
<li>
<img src="1.jpg" />
<p>
三亚是具有热带海滨风景特色的国际旅游城市,又被称为“东方夏威夷”。
</p>
</li>
</a>
<a href="https://goo.gl/maps/cSDqS7axoVMB61xw7">
<li>
<img src="1.jpg" />
<p>
三亚是具有热带海滨风景特色的国际旅游城市,又被称为“东方夏威夷”。
</p>
</li>
</a>
<a href="https://goo.gl/maps/cSDqS7axoVMB61xw7">
<li>
<img src="1.jpg" />
<p>
三亚是具有热带海滨风景特色的国际旅游城市,又被称为“东方夏威夷”。
</p>
</li>
</a>
<a href="https://goo.gl/maps/cSDqS7axoVMB61xw7">
<li>
<img src="1.jpg" />
<p>
三亚是具有热带海滨风景特色的国际旅游城市,又被称为“东方夏威夷”。
</p>
</li>
</a>
</ul>
<ul class="ul2">
<a href="https://goo.gl/maps/cSDqS7axoVMB61xw7">
<li>
<img src="1.jpg" />
<p>
三亚是具有热带海滨风景特色的国际旅游城市,又被称为“东方夏威夷”。
</p>
</li>
</a>
<a href="https://goo.gl/maps/cSDqS7axoVMB61xw7">
<li>
<img src="1.jpg" />
<p>
三亚是具有热带海滨风景特色的国际旅游城市,又被称为“东方夏威夷”。
</p>
</li>
</a>
<a href="https://goo.gl/maps/cSDqS7axoVMB61xw7">
<li>
<img src="1.jpg" />
<p>
三亚是具有热带海滨风景特色的国际旅游城市,又被称为“东方夏威夷”。
</p>
</li>
</a>
<a href="https://goo.gl/maps/cSDqS7axoVMB61xw7">
<li>
<img src="1.jpg" />
<p>
三亚是具有热带海滨风景特色的国际旅游城市,又被称为“东方夏威夷”。
</p>
</li>
</a>
</ul>
</div>
</div>
</body>
<script>
document.body.style.zoom = '80%';
</script>
</html>
标签:color,text,知识,value,height,width,html,margin,css
From: https://www.cnblogs.com/Lovi/p/17717476.html