首页 > 其他分享 >第八章 利用CSS制作导航菜单课后习题

第八章 利用CSS制作导航菜单课后习题

时间:2024-11-01 12:18:49浏览次数:6  
标签:color text top li ul 课后 习题 font CSS

1.利用CSS技术,结合链接和列表,设计并实现“山水之间”页面。

参考代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>山水之间</title>
		<style>
			.all{
				width:900px;
			}
			.top{
				width:900px;
				height: 100px;
				background-image: url(img/top.jpg);
			}
			.biaoti{
				line-height: 100px;
				font-size: 60px;
				font-family: "楷体";
				font-style: italic;
				float: left;
			}
			.middle{
				background-image: url(img/banner.jpg);
				height: 200px;
				margin-top: 10px;
				padding-left: 30px;
			}
			ul{
				list-style-type: none;
				
			}
			li{
				width: 80px;
				float:right;
				margin-top: 60px;
			}
			a{
				display: block;
				font-size: 20px;
				text-align: center;
				line-height: 40px;
				text-decoration: none;
				color: black;
			}
			a:hover{
				background-color: #aaaacc;
				color: white;
			}
			td{
				width: 80px;
				padding-right: 25px;
			}
			img{
				border:7px solid #aaaacc;
			}
			p{
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top">
				<div class="biaoti">山水之间</div>
				<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>
				</ul>
			</div>
			<div class="middle">
				<p>山和水的融合,是静和动的搭配</p>
				<p>单调与精彩的结合,也就组成了最美的风景</p>
				<p>在青山间探索,在绿水间泛舟......</p>
			</div>
			<h1>风光欣赏</h1>
			<table>
				<tr>
					<td><img src="img/img1.jpg"/></td>
					<td><img src="img/img2.jpg"/></td>
					<td><img src="img/img3.jpg"/></td>
					<td><img src="img/img4.jpg"/></td>
				</tr>
				<tr>
					<td><p>绿松</p>这几颗松树向阳一边的枝桠,向下斜斜地伸着,像搭起一道绿色的天梯</td>
					<td><p>瀑布</p>流云奔涌,群山浮动,滚滚的云流翻山而过,直污深谷,气势磅碍,宏伟壮观。</td>
					<td><p>青山</p>湖泊生活在山脚下,绿线的青山环抱着她,清澈的湖水映出身边的生机勃勃。</td>
					<td><p>泛舟</p>泛舟一日景,垂钓一片金</td>
				</tr>
			</table>
			<center>
				<br /><br />
				<p>版权所有&copy;山水之间</p>
			</center>
		</div>
	</body>
</html>

页面效果:

1.利用CSS技术,结合链接和列表,设计并实现“山水之间”页面。

参考代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>茶韵</title>
		<style type="text/css">
			.all{
				width: 900px;
			}
			.top{
				height: 200px;
				margin: auto;
				background: url(img/top-bg.jpg) no-repeat;
			}
			.wenzi{
				text-indent: 2em;
				line-height: 25px;
				width: 380px;
				float: left;
			}
			.wenzi a{
				display: block;
				font-size: 20px;
				width:180px;
				line-height: 40px;
				text-align: center;
				text-decoration: none;
				float: right;
			}
			.nav{
				float: right;
				margin-right: 50px;
			}
			a{
				text-decoration: none;
				text-align: center;
				display: block;
				width: 100px;
				line-height: 50px;
				font-size: 20px;
				color: black;
			}
			img{
				margin-top: 20px;
				margin-left: 20px;
				float: left;
			}
			ul,ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			ul li ol{
				display: none;
				position: absolute;
				top: -1px;
				right:100px;
			}
			ul li:hover ol{
				display: block;
			}
			ul li{
				position: relative;
			}
			ul li:hover,ul li:active{
				color: black;
				font-size: 25px;
				font-weight: bold;
				background-color: darkgray;
			}
			ul li a:hover,ul li a:active{
				color: black;
				font-size: 25px;
				font-weight: bold;
				background-color: darkgray;
			}
			.last{
				background-image: url(img/footer-bg.jpg);
				text-align: center;
				margin-top: 300px;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top"></div>
			<div class="wenzi">
				<span>闲暇时刻,约上三五志同道合知己,去幽静深林处,寻一最色优美之亭,沏一壶好茶,知已们吟诗作赋,品品茶道。又或是下几盘好棋,又或是各抒已见,聊聊彼此的胸怀壮志。无不是人生一大乐事。一只小小的茶杯,蕴含着无穷的奥秘与无尽之美。从胎土的选择、杯型的拿捏、釉药的施彩、士窑的烧结,茶杯在制作的每一个环节,都蕴藏着大学问。越是小茶杯越有品茶的韵味,轻轻抿一口,在嘴间感受一下茶的沁香,仿佛沁透心间。</span>
				<a href="#">更多茶文化>></a>
			</div>
			<img src="img/main.jpg"/>
			<br />
			<div class="nav">
				<nav>
					<ul>
						<li><a href="#">首页</a></li>
						<li>
							<a href="#">茶品</a>
							<ol>
								<li><a href="#">乌龙茶</a></li>
								<li><a href="#">普洱茶</a></li>
								<li><a href="#">高山绿茶</a></li>
							</ol>
						</li>
						<li><a href="#">企业</a></li>	
						<li><a href="#">联系</a></li>
						<li><a href="#">关于</a></li>
					</ul>
				</nav>
			</div>
			<div class="last">版权所有&copy;茶韵</div>
		</div>
	</body>
</html>

页面效果:

标签:color,text,top,li,ul,课后,习题,font,CSS
From: https://blog.csdn.net/2302_80786141/article/details/143428833

相关文章

  • 【前端基础】CSS基础
    目标:掌握CSS属性基本写法,能够使用文字相关属性美化文章页。01-CSS初体验层叠样式表(CascadingStyleSheets,缩写为CSS),是一种样式表语言,用来描述HTML文档的呈现(美化内容)。书写位置:title标签下方添加style双标签,style标签里面书写CSS代码。<title>CSS初......
  • 【前端基础】CSS进阶
    目标:掌握复合选择器作用和写法;使用background属性添加背景效果01-复合选择器定义:由两个或多个基础选择器,通过不同的方式组合而成。作用:更准确、更高效的选择目标元素(标签)。后代选择器后代选择器:选中某元素的后代元素。选择器写法:父选择器子选择器{CSS属性},父子......
  • CSS学完就练-分享链接
    前言本习题适合初学CSS的同学,强烈建议练习建议FLEX一波带走本题贴近实际业务,可以为将来面试工作做准备练习之前,查看要求应用场景向用户分享一个链接时弹出的界面,在各大社交平台上都能看到身影提供丰富功能如快速分享,扫描,复制等要求元素间距为8px元素宽高必须与......
  • css渐变背景的顶级用法:linear-gradient()
    background-image:linear-gradient(110deg,rgb(1,228,161)49%,rgb(0,0,0)2%51%,rgb(226,237,251)49%); linear-gradient详解:简单实例:从头部开始的线性渐变,从红色开始,转为黄色,再到蓝色:background-image:linear-gradient(red,yellow,blue);linear-gradient(......
  • 推荐一个在react项目中为元素添加样式的第三方库(styled-components)(css in js方案)
    1、安装插件pnpm      pnpmistyled-components npm      npminstall styled-componentsyarn        yarn add styled-components2、创建一个js文件用于写样式(模板字符串写法)(1)以App.jsx组件为例,创建一个style.js样式文件,创建组件并暴露//......
  • 跟着阿灵学前端——CSS 基础 (2)
    1.CSS长度单位px:像素em:相对元素font-size的倍数rem:相对根字体大小的倍数,html标签就是根。%:相对父元素计算的百分比。CSS中设置长度,必须加单位,否则样式无效。2.元素的显示模式块元素(block)又称:块级元素特点:在页面中独占一行,不会与任何元素共用一行,是从上到......
  • css_repeating-linear-gradient
    在不指定背景颜色渲染区间的情况下,repeating-linear-gradient与linear-gradient的没有区别<divclass="testtest1"></div><divclass="testtest2"></div>.test{width:150px;height:150px;border:1pxsolid#ccc;display:inli......
  • CSS
    css简介CSS就是cascadingstylesheet的缩写,中文译作“层叠样式表”或者“级联样式表”,适用于控制网页外观处理并允许将网页的表现与内容分离的一种标记性语言,CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言),是web网页开发技术的重要组成部分。CSS的好处使用CSS样......
  • HTML&CSS:3D旋转动画机器人摄像头
    效果演示创建了一个3D机器人摄像头效果。HTML<divclass="modelViewPort"><divclass="eva"><divclass="head"><divclass="eyeChamber"><divclass="eye">......
  • CSS3可视化网站
    Uiverse uiverse.io/这是一个国外的开源项目,所有效果全部拿来即用,都不用安装任何第三方包。并且每个小组件的效果都非常炸裂。项目包含了我们常用到的一些组件,例如:按钮Button、多选框Checkbox、胶囊按钮Switch、加载特效Loading、输入框Input、表单Form、提示框TooltipCSS......