静态网页（三）

最新推荐文章于 2020-07-22 14:33:22 发布
最新推荐文章于 2020-07-22 14:33:22 发布
阅读量132 收藏
点赞数
原文链接：https://my.oschina.net/u/4090399/blog/3027229
版权 
@charset "utf-8";
/* CSS Document */
*{/*通配符选择器*/
	margin:0px;
	padding:0px;
}
ul{
	list-style:none;
}
#box{
	/*background-color:#F00;*/
	width:1024px;
	height:1300px;
	/*margin:0 auto;*/
	margin:0 auto 0 auto;/*上 右 下 左*/
}
/*放图片，设置高度和图片一样高*/
#banner{
	background-color:#66F;
	height:209px;
}
#menu{
	background-color:#328048;/*用颜色取色器取的*/
	height:50px;
}
/*修改id为menu的、html标签下面的、ul标签的样式*/
#menu ul{
	list-style:none;/*去掉点*/
	float:right;/*靠右*/
	height:50px;	
	width:450px;
}

#menu li{
	line-height:50px;/*设置行居中*/
	float:left;/*可以使列表竖着变横着*/
	margin-left:20px;/*li距离左边那个li的距离*/
}

/*#menu ul li a{}*/
#menu a{
	color:#FFF;/*字体颜色*/
	text-decoration:none;/*去掉下划线*/
	font-size:16px;/*字体大小*/
	font-family:"微软雅黑";/*word中常见字体一般都可以写*/
}

#menu a:hover{/*当鼠标滑过超链接标签时的样式*/
	color:#F60;
}

#main{
	/*background-color:#6F0;*/
	height:1000px;
}
#left{
	/*background-color:#33C;*/
	height:1000px;
	width:250px;
	float:left;/*可以使div横向排排坐*/
}

#zuozhe{
	padding-top:15px;
	padding-left:15px;/*上边和左边留点空*/
	text-align:center;/*整个内容水平居中*/
}

#zuozhe img{
	border:1px solid #999;/*加边solid实线*/
	padding:8px;/*边与图片有个空白，类似相框*/
	border-radius:20px;/*圆角，值越大，角越园*/
}
#zuozhe span{
	 margin:10px;/*一圈的距离*/
	 display:block;/*改成盒子属性*/
	 border-topp:1px #999 dashed;/*	上面的虚线边*/
	 boeder-bottom:1px #999 dashed;/*下面的虚线边*/
	 font-size:18px;
	 padding-top:5px;
	 padding--bottom:5px;/*下面的*/
	 
}
/*class选择器的写法 以点开头后边跟着HTML标签上的class属性里面的那个名*/
.biaoti{
	color:#FFF;
	background-color:#328048;
	height:40px;
	width:220px;
	line-height:40px;/*设置垂直居中，值要与height的值一样*/
	font-size:16px;
	font-weight:bolder/*加粗*/;
	padding-left:30px;/*左边撑出来一个空*/
	border-radius:0 10px 10px 0;/*顺序：左上角、右上角、右下角、左下角*/
	
}
#huoli ul{
	list-style:none;
	padding-left:20px;
	padding-top:10px;
}

#huoli ul li{
	margin:5px;
	width:80px;
	float:left;
}

#huoli ul li a{
	font-size:12px;
	text-decoration:none;/*去下划线*/
	color:#333;/*网站字体颜色一般不是黑色*/
}

#huoli ul li a:hover{
	color :#090;
}

#huoli ul li img{
	margin-right:5px;
	
}
#list{
	clear:both;
}

#list ul{
	list-style:none;
	padding:15px;
}
#list ul li{
	padding-bottom:8px;
	padding-left:15px;
	border-bottom:1px #999 dotted;
	margin-bottom:8px;
	background:url(images/icon1.gif) no-repeat;
	background-position:5px center;
}



#right{
	background-color:#F3F;
	height:1000px;
	width:774px;
	float:right;/*可以使div横向排排坐*/
}

#footer{
	background-color:#F63;
	height:80px;
}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--引入css文件用link标签-->
<link href="blog.css" type="text/css" rel="stylesheet" />
<!--<script type="text/javascript" src=""></script>-->

</head>

<body>
    <div id="box">
        <div id="banner">
            <img src="images/bg.jpg" alt="我的图片不见了" />
        </div>
        <div id="menu">
            <!--ol是有序列表1,2,3  ul无续列表-->
            <ul>
                <li><a href="http://www.baidu.com" target="_blank">首页</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 id="main">
            <!--左边区域-->
               <div id="left">
                <!--划分3个区域-->
                <div id="zuozhe">
                    <img src="images/baby.jpg" alt="我的照片"/>
                    <!--文字,span方便对文字的样式修改，一行，不换行-->
                    <span>linda zhaoqi</span>
                </div>
                <div id="huoli">
                    <!--class通用在3个标题上的样式-->
                    <h5 class="biaoti">活力地带</h5>
                    <ul>
                    <li>
                    <img src="images/1.gif" alt="小图标"/>
                    <a href="#">个人首页</a>
                    </li>
                    <li>
                    <img src="images/2.gif" alt="小图标"/>
                    <a href="#">校园文化</a>
                    </li>
                    <li>
                    <img src="images/3.gif" alt="小图标"/>
                    <a href="#">阳光生活</a>
                    </li>
                    <li>
                     <img src="images/4.gif" alt="小图标"/>
                    <a href="#">释放梦想</a>
                    </li>
                    <li>
                     <img src="images/5.gif" alt="小图标"/>
                    <a href="#">我的相册</a>
                    </li>
                    <li>
                     <img src="images/6.gif" alt="小图标"/>
                    <a href="#">给我留言</a>
                    </li>
                    </ul>
                </div>
                <div id="list">
                    <h5 class="biaoti">我的文章分类</h5>
                    <ul>
                    <li> <a href="#">个人随笔</a></li>
                    <li> <a href="#">web开发</a></li>
                    <li> <a href="#">Spring框架</a></li>
                    <li> <a href="#">JavaSE</a></li>
                   </ul>
                   <h5 class="biaoti">文章列表</h5>
                   <ul>
                     <li> <a href="#">我家在哪里</a></li>
                     <li> <a href="#">你好！秋天</a></li>
                     <li> <a href="#">你好！春天</a></li>
                     <li> <a href="#">你好！冬天</a></li>
                     </ul>
                </div>
            </div>
            <div id="right">
                右边区域
            </div>         
        </div>
        <div id="footer">
            footer
        </div>
    </div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
*{/*通配符选择器*/
	margin:0px;
	padding:0px;
}
ul{
	list-style:none;
}
#box{
	/*background-color:#F00;*/
	width:1024px;
	height:1300px;
	/*margin:0 auto;*/
	margin:0 auto 0 auto;/*上 右 下 左*/
}
/*放图片，设置高度和图片一样高*/
#banner{
	background-color:#66F;
	height:209px;
}
#menu{
	background-color:#328048;/*用颜色取色器取的*/
	height:50px;
}
/*修改id为menu的、html标签下面的、ul标签的样式*/
#menu ul{
	list-style:none;/*去掉点*/
	float:right;/*靠右*/
	height:50px;	
	width:450px;
}

#menu li{
	line-height:50px;/*设置行居中*/
	float:left;/*可以使列表竖着变横着*/
	margin-left:20px;/*li距离左边那个li的距离*/
}

/*#menu ul li a{}*/
#menu a{
	color:#FFF;/*字体颜色*/
	text-decoration:none;/*去掉下划线*/
	font-size:16px;/*字体大小*/
	font-family:"微软雅黑";/*word中常见字体一般都可以写*/
}

#menu a:hover{/*当鼠标滑过超链接标签时的样式*/
	color:#F60;
}

#main{
	/*background-color:#6F0;*/
	height:1000px;
}
#left{
	/*background-color:#33C;*/
	height:1000px;
	width:250px;
	float:left;/*可以使div横向排排坐*/
}

#zuozhe{
	padding-top:15px;
	padding-left:15px;/*上边和左边留点空*/
	text-align:center;/*整个内容水平居中*/
}

#zuozhe img{
	border:1px solid #999;/*加边solid实线*/
	padding:8px;/*边与图片有个空白，类似相框*/
	border-radius:20px;/*圆角，值越大，角越园*/
}
#zuozhe span{
	 margin:10px;/*一圈的距离*/
	 display:block;/*改成盒子属性*/
	 border-topp:1px #999 dashed;/*	上面的虚线边*/
	 boeder-bottom:1px #999 dashed;/*下面的虚线边*/
	 font-size:18px;
	 padding-top:5px;
	 padding--bottom:5px;/*下面的*/
	 
}
/*class选择器的写法 以点开头后边跟着HTML标签上的class属性里面的那个名*/
.biaoti{
	color:#FFF;
	background-color:#328048;
	height:40px;
	width:220px;
	line-height:40px;/*设置垂直居中，值要与height的值一样*/
	font-size:16px;
	font-weight:bolder/*加粗*/;
	padding-left:30px;/*左边撑出来一个空*/
	border-radius:0 10px 10px 0;/*顺序：左上角、右上角、右下角、左下角*/
	
}
#huoli ul{
	list-style:none;
	padding-left:20px;
	padding-top:10px;
}

#huoli ul li{
	margin:5px;
	width:80px;
	float:left;
}

#huoli ul li a{
	font-size:12px;
	text-decoration:none;/*去下划线*/
	color:#333;/*网站字体颜色一般不是黑色*/
}

#huoli ul li a:hover{
	color :#090;
}

#huoli ul li img{
	margin-right:5px;
	
}
#list{
	clear:both;
}

#list ul{
	list-style:none;
	padding:15px;
}
#list ul li{
	padding-bottom:8px;
	padding-left:15px;
	border-bottom:1px #999 dotted;
	margin-bottom:8px;
	background:url(images/icon1.gif) no-repeat;
	background-position:5px center;
}



#right{
	background-color:#F3F;
	height:1000px;
	width:774px;
	float:right;/*可以使div横向排排坐*/
}

#footer{
	background-color:#F63;
	height:80px;
}

 

转载于:https://my.oschina.net/u/4090399/blog/3027229

choushuzhao5897
关注
HTML静态网页作业
02-15
7. **交互与JavaScript**：虽然这是静态网页作业，但了解基本的JavaScript可以增强网页交互性。比如，`<script>`标签可以引入JS代码，通过DOM（Document Object Model）操作HTML元素，实现动态更新、表单验证等功能...
web开发头标签meta
塞外游侠的专栏
12-04 453
  标签用于提供网页的说明信息。 标签的格式有两种： 标签没有结束标签，需要用“/”关闭它。在文档头部可包含多个 标签，书写顺序可以任意。带有 name 属性的 标签是说明性标签，它对网页的显示效果没有任何影响。name 属性定义了标签的性质，content 属性定义了标签的值。常用的有：(1) 关键字（keywords）：指定本页的关键字，主要用于给搜索引
HTML连载25-通配符选择器&选择器综合练习
weixin_44630050的博客
07-25 358
一、通配符选择器 作用：给当前页面上所有的标签设置属性 （2）格式： *{属性：值；} （3）注意点：由于通配符选择器是给界面上所有的标签设置属性，因此在设置之前会遍历所有的标签，如果当前界面上的标签比较多，那么性能就会比较差，所以一般在企业开发过程中一般不会使用通配符选择器。 （4）例子： *{ color: red; } ..........
css通配符选择器_CSS中的通配符选择器（*，^和$）
cumtb2009的博客
07-22 8387
css通配符选择器Introduction: 介绍： We all are aware of various types of selectors that can be used for developing a website or a web page. But do we know all of them? Well, if your answer to that question w...
初学vue-cli3.0+webpack+vue-router+elementUI后简单响应式静态页面的编写
saber的博客
07-30 2723
博主之前出去耍了几天，回来为了复习巩固前一段时间所学的ps切图以及vue的知识，所以去网上找了几个psd文件，用vue实现了一个简单的静态单页网页界面。 ...
个人静态网页模板
05-11
下面将详细讲解这三个技术及其在静态网页设计中的应用。 **HTML (HyperText Markup Language)** 是网页内容的基础，它是构成网页的骨架。HTML通过一系列标签来定义网页的结构，如`<head>`、`<body>`、`<header>`、`...
三个Html静态网页
09-09
提供的压缩文件可能包含这三个HTML静态网页的源代码、图片、样式表或其他相关资源。例如，GreenDay.rar可能是一个以乐队Green Day为主题的网页，website.rar可能是一个网站的多个页面，而HighSchoolMusical.zip可能...
test2_静态网页_
09-29
在IT领域，静态网页是一种常见的网页类型，它们的内容在服务器端被预先生成，并且在用户请求时无需经过复杂的服务器端处理直接发送到浏览器。在这个"test2_静态网页_"的项目中，我们聚焦于如何利用iFrame技术来实现...
家乡静态网页.zip
06-23
3. 静态网页：与动态网页相比，静态网页的内容在服务器端不会根据用户交互或数据请求而变化。它们通常由HTML、CSS和JavaScript组成，易于制作和维护，适合初学者学习网页设计。 4. 文件结构：一个静态网页项目通常...
基于java的共享汽车管理系统的开题报告2.docx
09-25
基于java的共享汽车管理系统的开题报告2.docx
基于SpringBoot的ChongyouLostandfound失物招领网站设计源码
09-25
该源码是一款基于SpringBoot框架构建的重邮失物招领网站，包含了250个文件，涵盖101个XML配置文件、44个Java源代码文件、26个HTML页面文件、20个JavaScript脚本文件、12个CSS样式文件、12个图片文件（JPG格式）、10个属性文件、5个ICO图标文件、5个PNG图片文件、4个SVG矢量图形文件。项目采用Java、HTML、JavaScript和CSS等多种语言实现，功能完善，界面友好。
小白学JavaScript的第六天
09-25
小白学JavaScript的第六天
源享科技STM32学习开发板芯片资料74HC595
09-25
源享科技STM32学习开发板芯片资料74HC595
基于C++和C语言的邻居Toyota日落追逐故事设计源码
09-25
本项目是一款以C++和C语言为基础开发的“Toyota日落追逐故事”游戏源码，包含68个文件，其中包括30个可执行文件、29个C++源文件、6个文档文件、2个C源文件以及1个文本文件。游戏讲述了一个主人公驾驶邻居家的Toyota汽车追逐日落的冒险故事，其中充满了惊险与刺激。
CEH2310-VB一种N-Channel沟道SOT23-6封装MOS管
09-25
30V;6A;RDS(ON)=30mΩ@VGS=10V;VGS=20V;Vth=1.2V
基于STM32F407，使用DFS算法实现最短迷宫路径检索(毕设&课设&实训&大作业&竞赛&项目)
09-25
基于STM32F407，使用DFS算法实现最短迷宫路径检索，分为三种模式：1.DEBUG模式，2. 训练模式，3. 主程序模式 ，DEBUG模式主要分析bug，测量必要数据，训练模式用于DFS算法训练最短路径，并将最短路径以链表形式存储Flash， 主程序模式从Flash中….zip项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
基于Go语言的快速可视化数据管理后台框架设计源码
09-25
本项目是一款基于Go语言构建的快速可视化数据管理后台框架源码，包含381个文件，涵盖289个Go源文件、15个Markdown文件、13个SQL文件、12个模板文件、11个JavaScript文件、8个CSS文件、6个JSON文件、3个YAML文件、3个数据库文件以及1个TOML文件。go-admin框架致力于简化可视化数据管理后台的搭建流程，适用于快速开发高效的数据管理应用。
Node.js简称Node或NoJ.docx
最新发布
09-25
Node.js（简称Node或NoJ，但通常直接称为Node.js）是一个基于Chrome V8引擎的开源JavaScript运行环境，它允许JavaScript代码在服务器端运行。以下是Node.js的详细介绍： 一、基础特性 跨平台：Node.js支持在多种操作系统上运行，包括Windows、macOS和Linux等，为开发者提供了广泛的兼容性。 事件驱动：Node.js采用事件驱动模型，通过事件和回调函数处理请求，实现非阻塞I/O操作，使得其能够高效处理大量并发请求。 非阻塞I/O：Node.js的I/O操作（如文件读写、网络请求等）是非阻塞的，这意味着当I/O操作正在进行时，Node.js的线程可以继续执行其他任务，从而提高应用程序的吞吐量。 单线程：虽然Node.js运行在一个单一的线程中，但它通过事件循环和异步I/O操作，能够充分利用多核CPU资源，实现高性能的服务器端应用。 模块化：Node.js支持模块化开发，可以通过npm（Node Package Manager）安装和管理各种模块，这使得开发更加方便和灵活。 二、优势与用途 高性能：得益于V8引擎和非阻塞I/O操
基于Java语言的废品回收系统设计源码
09-25
该项目是一款专注于废品回收的Java语言开发系统，包含184个文件，涵盖134个Java源文件、34个XML配置文件、5个YAML配置文件、3个属性文件以及少量图片和Git忽略文件等。系统旨在提升废品回收效率，实现智能化管理。
ASP.NET静态网页制作深度教程
"学习情境九-静态网页制作经典教程" 在学习静态网页制作的过程中，了解和掌握各种技术是至关重要的。本教程涵盖了多个学习情境，旨在帮助学员从基础到高级逐步精通静态网页的设计与开发。以下是各个学习情境的主要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值