CSS Mastery2(11.Climb the Mountain)

最新推荐文章于 2024-09-15 07:49:42 发布

孤岛浅滩

最新推荐文章于 2024-09-15 07:49:42 发布

阅读量423

点赞数

分类专栏： notes 文章标签： CSS 基础 first-child伪类相邻同胞选择器

本文链接：https://blog.csdn.net/m0_37851778/article/details/73871831

版权

notes 专栏收录该内容

89 篇文章 0 订阅

订阅专栏

一.Climb the Mountain
1.border-radius/box-shadow/RGBa/opacity（渐进增强）
2.goal:
①HTML&CSS的组织和约定。
②网格的灵活性。
③根据body类突出显示当前页面。
④用伪类&相邻同胞选择器寻找元素。
⑤通过组合类增强灵活性。
⑥RGBa/border-radius/box-shadow属性。
⑦定位列表项&显示内容。
3.CSS专家：Eric Meyer
4.blockquote元素内部文本，换行→空格。同时在该元素前后添加了换行，并增加了外边距。

5.John Muir语录：无论天气如何，不要忘记走出去，到真实的世界中去。

Example one:

code:

<!doctype html>
<html>
<head>
	<title></title>
	<meta charset='utf-8'>
	<link rel="stylesheet" type="text/css" href="">
	<style type="text/css">
	ul#navigation_pri{
		list-style: none;
		margin:0;
		position: absolute;
		top:0;
		left:215px;
		font-size: 19px;
		font-weight: bold;
		font-family: helvetica,arial,sans-serif;
		border:2px solid red;
	}
	ul#navigation_pri li{
		float:left;
		margin:0;
		padding: 30px 10px 0 10px;
		height: 3000px;
	}
	ul#navigation_pri li a{
		color:#000;
		text-decoration: none;
	}
	ul#navigation_pri li a:hover,
	ul#navigation_pri li a:focus{
		color:#333;
		text-decoration: underline;
	}
	.home ul#navigation_pri li.nav_home{
		background-color: #f5f5f5;
	}
	.home ul#navigation_pri li.nav_home a{
		color:#278dab;
		background: #f5f5f5 0 center no-repeat;
		padding:0 0 0 20px;
	}
	.home ul#navigation_pri li.nav_home a:hover,
	.home ul#navigation_pri li.nav_home a:focus{
		color:#000;
	}
	.home ul#navigation_pri li.nav_home a{
		background: url(images/nav_back.gif) no-repeat left top;
	}
	/*
	*position:relative;
	因为导航条是绝对定位，因此在Home那类背景下的文本被覆盖，但将blockquote
	设置为相对定位，即可解决该问题。
	*/
	div#branding blockquote{
		width: 505px;
		float: right;
		padding:0 70px 20px 0;
		border:2px solid blue;
		margin-top: 3em;
		background: url(images/branding_johnmuir.jpg) no-repeat right top;
		position: relative;
	}
	</style>
</head>
<body class="home">
	<ul id="navigation_pri">
		<li class="nav_home"><a href="">Home</a></li>
		<li class="nav_routes"><a href="">Routes</a></li>
		<li class="nav_about"><a href="">About</a></li>
		<li class="nav_shop"><a href="">Shop</a></li>
	</ul>
	<div id="branding">
	<blockquote id="johnmuir">
		<p>
			“Climb the mountains and get their good tidings. Nature's peace will flow into you as sunshine flows into trees. The winds will blow their own freshness into you, and the storms their energy, while cares will drop away from you like the leaves of Autumn.”
		</p>
		<p>JOHN MUIR, 1903</p>
	</blockquote>
	</div>
</body>
</html>

Result:

Example two:

code:

<!doctype html>
<html>
<head>
	<title></title>
	<meta charset='utf-8'>
	<link rel="stylesheet" type="text/css" href="">
	<style type="text/css">
	/*
	1.#ffc;淡黄色（背景）。
	*/
	div#others_routes ul{
		list-style: none;
		border:1px solid #dedeaf;
		background: #ffc;
		border-radius: 5px;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
		margin:0;
		padding:10px;
		width: 22em;
		font-size: small;
	}
	/*
	#dedeaf配上浅灰（#fff），有立体感
	*/
	div#others_routes ul li{
		margin:0;
		padding: 10px 55px 10px 0;
		position: relative;
		border:1px solid #dedeaf;	
		border-top:1px solid #fff;
		margin-bottom:;
		border-left: none;
		border-right: none;
	}
	
	div#others_routes ul li h3{
		margin-bottom: 5px;
		margin-top: 0;
	}	
	div#others_routes ul li img{
		position: absolute;
		top:20px;
		right:10px;
	}
	/*
	1.margin-top:3px解决了连续li之间的下、上外边距距离太远问题;
	*/
	div#others_routes ul li p.username{
		margin:3px 0 0 0;
		font-style: italic;
		font-size: 12px;
	}
	div#others_routes ul li p.dist-elev{
		margin-top: 0;
		margin-bottom: 0;
		color:#00AA00;
		font-weight: bold;
	}
	h2{
		font-size: 20px;
	}
	h2 a{
		font-size: 6px;
		text-decoration: none;
		color:#ccc;
		margin-left: 5px;
		font-style: italic;
	}
	/*
	1.:first-child伪类：
	Function:直接定位一个元素中的第一个子元素，不需要将该元素设置成独一无二的ID或者类，来定位该元素。
	2.去除顶部内边距&顶边框。
	*/
	div#others_routes ul li:first-child{
		padding-top: 0;
		border-top: none;
	}
	/*:last-child伪类，用法同上。
	div#others_routes ul li:last-child{
		padding-bottom: 0;
		border-bottom: none;
	}
	*/
	/*相同同胞选择器，由'+'组合符分隔*/
	div#others_routes ul li+li+li+li{
		padding-bottom: 0;
		border-bottom: none;
	}
	</style>
</head>
<body>
	<div id="others_routes">
		<h2>Members' routes<a href="">(view all)</a></h2>
		<ul>
			<li>
				<h3>Kinderscout ridgewalk circuit</h3>
				<p class="dist-elev">13.6 miles | Elevation 2,400ft</p>
				<p class="username">
					from Glen Swinfield 
					<img src="images/avatar_swinfield.jpg" class="avator"
					alt="Glen Swinfield's avatar">
				</p>
			</li>

			<li>
				<h3>Castleton Ridges Walk</h3>
				<p class="dist-elev">12.2 miles | elevation 1,343ft</p>
				<p class="username">
					from Phil Swan
					<img src="images/avatar_swan.jpg" class="avatar" 
					alt="Phil Swan's avatar">
				</p>
			</li>

			<li>
				<h3>Branston and Eaton villages</h3>
				<p class="dist-elev">5.7 miles | elevation 1,213ft</p>
				<p class="username">
					from Gregory Wood
					<img src="images/avatar_wood.jpg" class="avatar" 
					alt="Gregory Wood's avadar">
				</p>
			</li>

			<li>
				<h3>Ilkley Moor and Otley</h3>
				<p class="dist-elev">24.7 miles | elevation 2,473ft</p>
				<p class="username">
					from Jamie Pittock
					<img src="images/avatar_pittock.jpg" class="avatar"
					alt="Jamie Pittock's avatar">
				</p>
			</li>
		</ul>
	</div>
</body>
</html>

Result: