网页设计与开发-实验报告-4

笨笨的企鹅

于 2022-10-25 00:15:11 发布

阅读量1.7k

点赞数 1

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

本文链接：https://blog.csdn.net/baiziyuandyufei/article/details/127498950

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

网页设计与开发-实验报告-4

网页设计与开发-实验报告-4

网页设计与开发-实验报告-4

学生实验2

利用list-style-image:url(图像文件名);的方式指定列表项之前使用特定的图片显示

注意：图像大小应当与ul的line-height属性值相当，这里设置图像大小为24*24

在这里插入图片描述

<!DOCTYPE HTML>
<html>
<head>
  <title>学生实验2</title>
	<style type="text/css">
		.container{width:350px;margin:0 auto;text-align:left;
background-color:#EFEFDA;padding: 20px;}
		.first_line{font-family:黑体;font-size:16px;padding-left:20px;} 
		ul{list-style-image: url("image/a.gif");font-size:16px;line-height:24px;}
	</style>
</head>
<body>
    <div class="container">	
    	<p class="first_line">暴雪：商业 艺术与技术的平衡之道</p>
		  <ul>
        <li >点选名将 抢礼包《千军破》首服开启</li>
        <li>战国新游《王者天下》开启 抢礼包</li>
        <li>快来玩《德州扑克》 与人斗其乐无穷</li>
        <li>《十年一剑》真武侠一区开启 抢礼包</li>
        <li>可买卖游戏代码 传魔兽大灾变过审批</li>
        <li>儿时游戏50年变迁 00后迷动画爱网游</li>
        <li>监狱强迫犯人打网游 徐州禁少年进网吧</li>
        <li>ipad成为最赚钱的移动游戏平台</li>    
      </ul>
    </div>
</body>
</html>

学生实验3

参照实验3设计水平导航条

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <title>学生实验3</title>
<style>
 .container { font-family:宋体; font-size:18px;font-weight:bold; background-color: #0000ff;width:720px;} 
ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
li{float:left;width:120px;}
a:link,a:visited{display:block;color:#FFFFFF;text-align:center;padding:4px;text-decoration:none;}
a:hover,a:active{background-color:#cc0000;}
</style>
</head>

<body>
<div class="container">
<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>
</ul>
</div>
</body>
</html>

学生实验4

根据下图，利用嵌套列表或定义列表完成页面编码

在这里插入图片描述

<!DOCTYPE html>

<html>

<head>
<title>学生实验4</title>

<style>

.container { 
    font-family:宋体; 
    font-size:18px;
    font-weight:bold; 
    background-color: #0000ff;
    width:1000px;
} 

ul{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}

li{
    width:120px;
    float:left;}

a{
    display:block;
    color:#FFFFFF;
    text-align:center;
    padding:4px;
    text-decoration:none;
}

a:hover
{
    background-color:#cc0000;
} 

</style>

</head>



<body>

<div class="container">

	<ul>
		<li><a href="">视频</a></li>
		<li><a href="">PPTV</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>

	<ul>
		<li class="conCat"><a href="">小说</a></li>
		<li class="conInfo"><a href="">起点女生</a></li>
		<li class="conInfo"><a href="">有声小说网</a></li>
		<li class="conInfo"><a href="">红袖言情</a></li>
		<li class="conInfo"><a href="">纵横中文</a></li>
		<li class="conInfo"><a href="">言情小说吧</a></li>
	</ul>
	<ul>
		<li class="li2"><a href="">4399小游戏</a></li>
		<li class="li2"><a href="">征途2</a></li>
		<li class="li2"><a href="">17173</a></li>
		<li class="li2"><a href="">2125小游戏</a></li>
		<li class="li2"><a href="">6543小游戏</a></li>
		<li class="li2"><a href="">JJ斗地主</a></li>
		<li class="li2"><a href="">幻想三国</a></li>
	</ul>
	<ul>
		<li class="li2"><a href="">音乐</a></li>
		<li class="li2"><a href="">谷歌音乐</a></li>
		<li class="li2"><a href="">一听音乐网</a></li>
		<li class="li2"><a href="">酷我音乐</a></li>
		<li class="li2"><a href="">AB音乐网</a></li>
		<li class="li2"><a href="">百度MP3</a></li>
	</ul>
	<ul>
		<li class="li2"><a href="">酷玩</a></li>
		<li class="li2"><a href="">7k7k小游戏</a></li>
		<li class="li2"><a href="">赛尔号</a></li>
		<li class="li2"><a href="">3366小游戏</a></li>
		<li class="li2"><a href="">八仙封神传</a></li>
		<li class="li2"><a href="">战将</a></li>
		<li class="li2"><a href="">英雄远征</a></li>
	</ul>
	<ul>
		<li class="li2"><a href="">体育</a></li>
		<li class="li2"><a href="">新浪体育</a></li>
		<li class="li2"><a href="">搜狐体育</a></li>
		<li class="li2"><a href="">网易体育</a></li>
		<li class="li2"><a href="">鲨威体育</a></li>
		<li class="li2"><a href="">NBA中文网</a></li>
		<li class="li2"><a href="">雅虎体育</a></li>
	</ul>
</div>

</body>

</html>

学生实验5

设计一个图文混排页面

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <title>图文混排</title>
        <style type="text/css">
            .container{
                width:750px;
            }
            p{
                border:1px;
                text-indent: 2em;
            }
            img{
                float: left;
                margin: 0 5px 5px 0;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <img src="image/qm.jpeg" alt="乔姆斯基">
            <p>
                艾弗拉姆·诺姆·乔姆斯基博士（Avram Noam Chomsky，1928年12月7日—）是麻省理工学院语言学的荣誉退休教授。乔姆斯基的《生成语法》被认为是20世纪理论语言学研究上最伟大的贡献。他还通过对伯尔赫斯·弗雷德里克·斯金纳的《口头行为》的评论，发动了心理学的认知革命，挑战在1950年代占主导地位的行为主义者学习精神和语言的方式。他那自然的学习语言的方法也对语言和精神的哲学起了很大的影响。他的另一大成就是建立了乔姆斯基层级：根据文法生成力不同而对正则语言做的分类。乔姆斯基还因他对政治的热忱，尤其是他对美国和其它国家政府的批评而著名。乔姆斯基把自己归为自由社会主义者，并且是无政府工团主义的同情者。一般认为他是活跃在美国左翼政坛的著名主要知识分子。据艺术和人文引文索引说，在1980年到1992年，乔姆斯基是被文献引用数最多的健在学者，并是有史以来被引用数第8多的。
            </p>
        </div>
    </body>
</html>