css布局练习

最新推荐文章于 2024-03-18 11:28:08 发布

又菜又想学java

最新推荐文章于 2024-03-18 11:28:08 发布

阅读量135

点赞数

分类专栏： javaweb各种案例文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_46102607/article/details/114249778

版权

javaweb各种案例专栏收录该内容

10 篇文章 0 订阅

订阅专栏

要实现的效果：
在这里插入图片描述
提供的图片素材有：

就是让前面的标题小图片和后面的文字标题一一对应起来

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.one{
				width: 300px;
				color: rgb(255,254,250);
				background-color: rgb(81,134,0);
				height: 30px;
				line-height: 30px;
				text-indent: 16px;
			}
			.two{
				width: 300px;
				height: 360px;
				background-color: rgb(242,244,223);
					
			}
			
			ul{
				margin: 0;
				padding-top: 10px;
				/*ul列表去序号*/
				list-style: none;
			}
			
			li{
				/*垂直方向居中*/
				line-height: 30px; 
				background-repeat: no-repeat;
				background-position: 0px center;
				text-indent: 30px;
			}
			li:nth-of-type(1){
							background-image: url(img/book_no01.gif);
						}
						li:nth-of-type(2){
							background-image: url(img/book_no02.gif);
						}
						li:nth-of-type(3){
							background-image: url(img/book_no03.gif);
						}
						li:nth-of-type(4){
							background-image: url(img/book_no04.gif);
						}
						li:nth-of-type(5){
							background-image: url(img/book_no05.gif);
						}
						li:nth-of-type(6){
							background-image: url(img/book_no06.gif);
						}
						li:nth-of-type(7){
							background-image: url(img/book_no07.gif);
						}
						li:nth-of-type(8){
							background-image: url(img/book_no08.gif);
						}
						li:nth-of-type(9){
							background-image: url(img/book_no09.gif);
						}
						li:nth-of-type(10){
							background-image: url(img/book_no10.gif);
						}

			a{
				/*超链接去下划线*/
				text-decoration: none;
				color: rgb(38,90,165);
			}
		</style>
	</head>
	<body>
		<div class="one">
			畅销书排行榜 <img align="absmiddle" src="img/bang.gif"/>
		</div>
		
		<div class="two">
			<ul>
				<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><a href="">遇见心想事成的自己（《遇...</a></li>
				<li><a href="">世界上最伟大的推销员（插...</a></li>
				<li><a href="">我的成功可以复制（唐骏亲...</a></li>
				<li><a href="">少有人走的路：心智成熟的...</a></li>
				<li><a href="">活出全新的自己——唤醒...</a></li>
			</ul>
		</div>
	
	</body>
</html>

页面效果如下：
在这里插入图片描述

又菜又想学java

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css布局练习

要实现的效果：提供的图片素材有：就是让前面的标题小图片和后面的文字标题一一对应起来代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .one{ width: 300px; color: rgb(255,254,250); ba
复制链接

扫一扫

专栏目录