CSS实例【九】

最新推荐文章于 2022-07-14 09:53:51 发布

虾尾丸子

最新推荐文章于 2022-07-14 09:53:51 发布

阅读量69

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/yogurt_sweets/article/details/118031283

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

**这是一个简易的静态网页：**最近白天累代码，晚上看相关的书，效果也还不错，理论实践都有了，希望能多多坚持～

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
		*{
			box-sizing: border-box;
		}
		body{
			margin: 0;
		}
		/* 内容标题 */
		.header {
			background-color: #2196F3;
			color: white;
			text-align: center;
			padding: 0.9375rem;
		}
		/* 底部文本 */
		.footer {
			background-color: #444;
			color: white;
			padding: 0.9rem;
		}
		/* 顶部菜单栏 */
		.topmenu {
			list-style-type: none;
			margin: 0;
			padding: 0;
			overflow: hidden;/* 内容会被修剪，并且其余内容是不可见的。 */
			background-color: #777;
		}
		.topmenu li {
			float: left;
		}
		.topmenu li a {
			/* display设置inline-block行内块元素（横着的块）；block将显示为块级元素，此元素前后会带有换行符（竖着的块） */
			display: inline-block;
			color: #00cc00;/* 原来的white会更漂亮 */
			text-align: center;
			padding: 16px;
			text-decoration: none;
		}
		/* 鼠标移到顶部菜单样式 */
		.topmenu li a:hover {
			background-color: #4CAF50;
			color: white;
		}
		/* .topmenu li a.active {
			color: white;
			background-color: #4CAF50;
		} */
		.column {
			float: left;
			padding: 15px;
		}
		.clearfix::after {
			content: "";
			clear: both;
			display: table;
		}
		.sodemenu{
			width: 25%;
		}
		.content{
			width: 75%;
		}
		/* 侧边栏样式，改了颜色方便区分，虽然有点丑 */
		.sidemenu ul {
			/* list-style-type其实就是列表前面的那个小标记，有圆点，方块，圆圈....默认是标记是实心圆（删掉就会有实心圆圈圈出来）。none是什么都没有，无标记 */
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
		.sidemenu li a {
			margin-bottom: 4px;
			display: block;
			padding: 8px;
			background-color: #eee;
			text-decoration: none;
			color: #ffa000;/* 原来的white会更漂亮 */
		}
		/* 鼠标移到侧边栏： */
		.sidemenu li a:hover{
			background-color: #008CBA;
			color: white;
		}
		/* 侧边栏 */
	/* 	.sidemenu li a.active{
			background-color: #008CBA;
			color: white;
		} */
		</style>
		
		
	</head>
	<body>
		
		<ul class="topmenu">
			<li><a href="#home" class="active">主页</a></li>
			<li><a href="#news">新闻</a></li>
			<li><a href="#contact">联系我们</a></li>
			<li><a href="#about">关于我们</a></li>
		</ul>
		
		<div class="clearfix">
			<div class="column sidemenu">
				<ul>
					<li><a href="#flight">The Flight</a></li>
					<li><a href="#City" class="active">The City</a></li>
					<li><a href="#Island">The Island</a></li>
					<li><a href="#Food">The Food</a></li>
					<li><a href="#People">The People</a></li>
					<li><a href="#history">The history</a></li>
					<li><a href="#oceans">The oceans</a></li>
				</ul>
			</div>
			
			<div class="column content">
				<div class="header">
					<h1>The City</h1>
				</div>
				<h1>Chania</h1>
				<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
				<p>You will learn more about responsive web page in a later chapter.</p>
			</div>
		</div>
		
		<div class="footer">
			<p>底部文本</p>
		</div>
	</body>
</html>

其实是很简单的网页，但总算是一个大的进步了，鼓励自己，今晚约饭哈哈哈～
资源自取，免费的，供交流学习，后面还会持续更新的

虾尾丸子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实例【九】

**这是一个简易的静态网页：**最近白天累代码，晚上看相关的书，效果也还不错，理论实践都有了，希望能多多坚持～<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ box-sizing: border-box; } body{ margin: 0; } /* 内容标题
复制链接

扫一扫