H5+CSS布局及优化

最新推荐文章于 2021-09-13 16:43:38 发布

敬礼 salute

最新推荐文章于 2021-09-13 16:43:38 发布

阅读量363

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/weixin_49868928/article/details/108802148

笔记专栏收录该内容

15 篇文章

订阅专栏

用a结合img来实现图片切换
代码如下

<html>
	<style type="text/css">
				.div1{
					height: 600px;
					width: 800px;
					margin: 20px auto;
					position: relative;
					}
				.div2{
					height: 600px;
					width: 800px;
					overflow: hidden;
					}
				.div2 img{
					height: 600px;
					width: 800px;
					}
				.div3 ul{
					height: 40px;
					list-style: none;
					position: absolute;
					right: 200px;
					bottom: 20px;
					}
				.div3 li{
					float: left;
					margin-left: 20px;
					}
				.div3 a{
					height: 20px;
					width: 20px;
					background-color: red;
					border: #101010 5px solid;
					border-radius: 50%;
					}
				.div3 a:hover{
					background-color: wheat;
					border: #808080 5px solid;
					border-radius: 50%;
					}
				.div3 a{
					display: block;
					}
			</style>
		</head>
		<body>
			<div class="div1">
				<div class="div2">
					<img id="a1" src="imgs/1.png" >
					<img id="a2" src="imgs/3.jpg" >
					<img id="a3" src="imgs/tp.png" >
					<img id="a4" src="imgs/suning.jpg" >
					<img id="a5" src="imgs/suning2.jpg" >
				</div>
					<div class="div3">
						<ul>
							<li><a href="#a1"></a></li>
							<li><a href="#a2"></a></li>
							<li><a href="#a3"></a></li>
							<li><a href="#a4"></a></li>
							<li><a href="#a5"></a></li>
						</ul>
					</div>
				</div>
		</body>
	</html>

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.p1{
				text-align: center;
				font-size: 100px;
				background-color: black;
				background-color: rgba(50,254,200,0.3);
				color: #000000;
				line-height: 200px;
				text-shadow: 30px 23px 31px #333;
			}
			.p2{
				text-align: center;
				font-size: 100px;
				background-color: #000000;
				background-color: rgba(50,254,200,0.3);
				line-height: 100px;
				/*水平位移,垂直位移,模糊程度,阴影颜色*/
				text-shadow: 30px 50px 10px #333;
			}
		</style>
	</head>
	<body>
		<p class="p1">苍茫的天涯是我的爱</p>
		<p class="p2">绵绵的青山脚下花开</p>
	</body>

结合所有代码实现一个日历:

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
		.div1{
				width: 538px;
				height: 370px;
				/*border: 1px solid red;*/
				box-sizing: border-box;
				margin: auto;
				position: relative;
			}
			.u1{
				list-style: none;
				float: left;
				/*border: 1px solid red;*/
				box-sizing: border-box;
				position: absolute;
				top: 35px;
				width: 420px;
				height: 300px;
				font-size: 18px;
				margin-top: 20px;
				padding-left: 15px;
			}
			li{
				float: left;
				font-size: 15px;
				border: 1px solid blue;
				width: 55px;
				height: 52.5px;
				text-align: center;
				border-left: none;
				border-right: none;
				cursor: pointer;/*鼠标手性*/
				box-sizing: border-box;
			}
			li:hover{
			border: 2px solid blue;/*鼠标移动效果*/
			}
			i{
				font-size: 5px;
				font-style: normal;/*改变字体*/
			}
			li:nth-child(7n){
				color: red;          /*伪类选择器*/
			}
			li:nth-child(7n-1){
				color: red;
			}
			#li1{
				color: gray;
			}
		</style>
	</head>
	<body>
		<div class="div1"><img src="imgs/1.jpg" >
		<ul class="u1">
			<li>一</li>
			<li>二</li>
			<li>三</li>
			<li>四</li>
			<li>五</li>
			<li>六</li>
			<li>日</li>
			<li>30<br><i>十九</i></li>
			<li>1<br><i>艾滋病日</i></li>
			<li>2<br><i>廿一</i></li>
			<li>3<br><i>廿二</i></li>
			<li>4<br><i>廿三</i></li>
			<li>5<br><i>廿四</i></li>
			<li>6<br><i>廿五</i></li>
			<li>7<br><i>廿六</i></li>
			<li>8<br><i>廿七</i></li>
			<li>9<br><i>廿八</i></li>
			<li>10<br><i>廿九</i></li>
			<li>11<br><i>初一</i></li>
			<li>12<br><i>初二</i></li>
			<li>13<br><i>初三</i></li>
			<li>14<br><i>初四</i></li>
			<li>15<br><i>初五</i></li>
			<li>16<br><i>初六</i></li>
			<li>17<br><i>初七</i></li>
			<li>18<br><i>初八</i></li>
			<li>19<br><i>初九</i></li>
			<li>20<br><i>初十</i></li>
			<li>21<br><i>十一</i></li>
			<li>22<br><i>十二</i></li>
			<li>23<br><i>十三</i></li>
			<li>24<br><i>十四</i></li>
			<li>25<br><i>十五</i></li>
			<li>26<br><i>十六</i></li>
			<li>27<br><i>十七</i></li>
			<li>28<br><i>十八</i></li>
			<li>29<br><i>十九</i></li>
			<li>30<br><i>二十</i></li>
			<li>31<br><i>廿一</i></li>
			<li id="li1">1<br><i>元旦</i></li>
			<li id="li1">2<br><i>廿三</i></li>
			<li id="li1">3<br><i>廿四</i></li>
		</ul>
		</div>
	</body>
</html>