Web基础04

最新推荐文章于 2022-12-13 17:25:00 发布
最新推荐文章于 2022-12-13 17:25:00 发布
阅读量64 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45598885/article/details/100571940
版权

制作一个简单页面
CSS代码：

*{
			margin: 0;
			padding: 0;
		}
		#body{
			margin-left:600px;
			height: 100%;
			width: 780px;
			background-color: royalblue;
		}

		#head{
			
			height: 150px;
			background-image: url(img/banner.jpg);

			
		}
		#top{
			
			height: 30px;
			background-image: url(img/button1.jpg);
			}
			#top li{
				text-align: center;
				width: 78px;
				height: 33px;
				list-style-type: none;
				float: left;
				line-height: 33px;
			}
			#top li:hover{
				background-image: url(img/button1_bg.jpg);
			}
			#top a{	
				color: plum;
				text-decoration: none;
				/*margin-left:10px ;*/
				margin-top: 10px;
				
			}

		#banner{
			
			height: 550px;
			background-color: gold;
		}
		#banner #left{
			border-style:solid ;
			border-width:1px ;
			width: 198px;
			height: 700px;
            background-color: paleturquoise;
			float: left;
		}
		#banner #left #tqcx{
			height: 47px;
			background-image: url(img/weather.jpg);
			
		}
		#banner #left #tqcx p{
			padding-top: 25px;
			text-align: center;
			font-family: "黑体";
			color: wheat;
		}
		#banner #left #tq{
			
			border-style: solid;
			border-color:white ;
			border-bottom-color:#538EC6 ;
			height: 175px;
			background-color: #538ec6;
			
		}
		#banner #left #tq ul{
			text-align: left;
			list-style-type: none;
			font-size: 13px;
			font-family: "宋体";
			color: greenyellow;
			
			
		}
		#banner #left #tq li{
			padding-top:15px ;
			
		}
		#banner #left #tuijian{
			border-style: solid;
			border-color:white ;
			border-top-color: cadetblue;
			border-bottom-color:cadetblue ;
			color: wheat;
			font-family: "黑体";
			height: 25px;
			background-color: cadetblue;
		}
		#banner #left #tupian{
			border-style: solid;
			border-color:white ;
			border-top-color: paleturquoise;
			border-bottom-color:paleturquoise ;
			text-align: center;
			color: red;
		}
		
		#banner #left #tupian img{
			border-style:solid ;
			border-color:wheat ;
		}
		#banner #left #tupian a{
			text-decoration: none;
			color: red;
		}
		#banner #left #tupian a:hover{
			color: black;
		}
		
		#banner #middle{
			border-style:solid ;
			border-width:1px ;				
			width: 378px;
			height: 700px;
			background-color: white;
			float: left;
		}
        #banner #middle #mj{
        	
        	padding-top:20px ;
        	height: 60px;
        }
		
		#banner #middle #mg img{
			border-style: solid ;
			border-color:white ;
			border-width:1px ;	
		}
		
		#banner #middle #mjtp img{
			border-style:solid ;
			border-color:cornflowerblue ;
			border-width: 1px;
			margin-left:6px ;
		}
		#banner #middle #lxjx{
			
        	padding-top:20px ;
        	height: 60px;
		}
		#banner #middle #lx a{
			text-decoration: none;
			color: cornflowerblue;
		}
		#banner #middle #lx a:hover{
			color: red;
		}
		#banner #middle #lx{
			margin-left:8px ;
			
			text-align: left;
			list-style-type: none;
			font-size: 14px;
			
		}
		#banner #middle #lx li{
			padding-top:9px ;
		}
		#banner #right{
			border-style:solid ;
			border-width:1px ;
			width: 198px;
			height: 700px;
			background-color: darkblue;
			float: left;
		}
		#banner #right #fg{
			text-align: left;
			
			font-family: "黑体";
			height: 25px;
			background-color: cadetblue;
			color: wheat;
			
		}
		#banner #right #fg img{
			margin-left:5px ;
		}
		#banner #right #fg p{
			padding-top:4px ;
		}
		#banner #right #fgtp{
			margin-left: 22px;
		}
		#banner #right #fgtp img{
			margin-top:10px ;
			border-style:solid ;
			border-width:1px ;
			border-color:antiquewhite ;
		}
		#banner #right #xc{
			text-align: left;
			
			font-family: "黑体";
			height: 25px;
			background-color: cadetblue;
			color: wheat;
			
		}
		#banner #right #xc img{
			margin-left:5px ;
		}
		#banner #right #xc p{
			padding-top:4px ;
		}
		#banner #right #fan{
			
			height: 170px;
			background-color: brown;
		}
		#banner #right #fan a{
			font-family: "隶书" ;
			text-decoration: none;
			color: white;
		}
		#banner #right #fan a:hover{
			color:black ;
		}
		#banner #right #fan p{
			padding-top: 8px;
			margin-left:8px ;
			border-bottom: dashed;
			border-width:1px ;
			border-color:white ;
		}
		#banner #right #jd{
			text-align: left;
			
			font-family: "黑体";
			height: 25px;
			background-color: cadetblue;
			color: wheat;
			
		}
		#banner #right #jd img{
			margin-left:5px ;
		}
		#banner #right #jd p{
			padding-top:4px ;
		}
		#banner #right #bg{
			color: white;
			height: 225px;
			background-color: brown;
		}
		#banner #right #bg a{
			font-family: "隶书" ;
			text-decoration: none;
			color: white;
		}
		#banner #right #bg a:hover{
			color:black ;
		}
		#banner #right #bg p{
			padding-top: 8px;
			margin-left:8px ;
			border-bottom: dashed;
			border-width:1px ;
			border-color:white ;
		}
		#foot{
			float: left;
			border-style:solid ;
			border-color:white ;
			height: 50px;
			width:780px;
			background-color: plum;
			text-align: center;
		}
		#foot span{
			margin-left:5px ;
			color: antiquewhite;
		}

HTML代码：

	</div>
	<div id="top">
		<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>
			<li><a href="###">摄影摄像</a></li>
			<li><a href="###">游记精选</a></li>
			<li><a href="###">资源下载</a></li>
			<li><a href="###">雁过留声</a></li>
		</ul>
	   

       
       
  
	</div>
	<div id="banner">
      <div id="left">
      	<div id="tqcx">
      		<p>天气查询</p>
      	</div>
      	<div id="tq">
      		<ul>
      			
      			<li><img src="img/icon1.gif"/>乌鲁木齐 雷阵雨 20℃-31℃</li>
      			<li><img src="img/icon1.gif"/>吐鲁番  多云转阴 20℃-28℃</li>
      			<li><img src="img/icon1.gif"/>喀什 阵雨转多云 25℃-32℃</li>
      			<li><img src="img/icon1.gif"/>库尔勒 阵雨转阴 21℃-28℃</li>
      			<li><img src="img/icon1.gif"/>克拉玛依 雷阵雨 26℃-30℃</li>
      		</ul>
      	</div>
      	<div id="tuijian">
      		<p><img src="img/icon2.gif" /> 今日推荐</p>
      	</div>
      	<div id="tupian">
      		<a href="###"><img src="img/tuijian1.jpg" /></a>
      		<p><a href="###">喀纳斯河</a></p>
      		<a href="###"><img src="img/tuijian2.jpg" /></a>
      		<p><a href="###">布尔津</a></p>

      		<a href="###"><img src="img/tuijian3.jpg" /></a>
      		<p><a href="###">天山之路</a></p>
      	</div>
      </div>
      <div id="middle">
      	<div id="mg">
      		
      		<img title="叽里呱啦" src="img/ghost.jpg" />
      	</div>
      	<div id="mj">
      		<img src="img/picture_h1.gif" /><br />
      		
      	</div>
      	<div id="mjtp">
      		<a href="###"><img src="img/beauty1.jpg" /></a>
            <a href="###"><img src="img/beauty2.jpg" /></a>
            <a href="###"><img src="img/beauty3.jpg" /></a>
            <a href="###"><img src="img/beauty4.jpg" /></a>
      	</div>
      	<div id="lxjx">
      		<img src="img/route_h1.gif" />
      	</div>
      	<div id="lx">
      		<li><a href="###"><img src="img/icon1.gif"/>  吐鲁番——库尔勒——库车——塔中——和田——喀什</a></li>
      		<li><a href="###"><img src="img/icon1.gif"/>  乌鲁木齐——天池——克拉玛依——乌伦古湖——喀纳斯</a></li>
      		<li><a href="###"><img src="img/icon1.gif"/>  乌鲁木齐——奎屯——乔尔玛——那拉提——巴音布鲁克</a></li>
      		<li><a href="###"><img src="img/icon1.gif"/>  乌鲁木齐——五彩城——将军隔壁——吉木萨尔</a></li>
      	</div>
      	
      </div>
      <div id="right">
      	<div id="fg">
      		<p><img src="img/icon2.gif"/>  新疆风光</p>
      	</div>
      	<div id="fgtp">
      		<img title="点击查看大图" src="img/map1.jpg" />
      		<img title="点击查看大图" src="img/map2.jpg" />
      	</div>
      	<div id="xc">
      		<p><img src="img/icon2.gif"/>  小吃推荐</p>
      	</div>
      	<div id="fan">
      		<p><a href="###"> 17号抓饭</a></p>
      		<p><a href="###"> 大盘鸡</a></p>
      		<p><a href="###"> 五一夜市</a></p>
      		<p><a href="###"> 水果</a></p>

      	</div>
      	<div id="jd">
      		<p><img src="img/icon2.gif"/>  宾馆酒店</p>
      	</div>
      	<div id="bg">
      		<p><a href="###"> 美丽华大饭店</a></p>
      		<p><a href="###"> 海德大饭店</a></p>
      		<p><a href="###"> 银都大饭店</a></p>
      		<p><a href="###"> 宏福大饭店</a></p>
      		<p><a href="###"> 友好大饭店</a></p>
      		<p><a href="###"> 棉麻宾馆</a></p>
      		<p><a href="###"> 电信宾馆</a></p>

      	</div>
      	
      </div>
	</div>
	<div id="foot">
		<p>艾萨克&copy;版权所有<a href="mailto:demo@demo.com" style="text-decoration: none;"><span>demo@demo.com</span></a></p>
	</div>
	
</body>

总体做的还可以，只是在导航栏那里有一点问题，刚开始不会把链接的背景设置成一个区域块，然后给li设置了大小，添加了一个伪类

#top li:hover{
					background-image: url(img/button1_bg.jpg);
				}

解决了这个问题。还有鼠标移动到图片上的时候，给提示文字，在添加图片的时候添加一个Title属性。

<img title="叽里呱啦" src="img/ghost.jpg" />
小马的爸爸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WEB入门一 网页设计基础
张晨光老师的播客
02-14 2万+
本章简介 在当今社会，网页是网络信息共享和发布的主要形式。而HTML (Hyper Text Mark-up Language)，即超文本标记语言，是创建网页基础。本章将学习HTML文档的基本结构、组成HTML文档的各类常见标签。HTML 标签可以说明文字、图形、动画、声音、表格和链接等。本章重点是各种标签的基本语法和用法。核心技能部分1.1HTML文档基本结构首先我们来
Web前端基础day04.zip
08-19
在Web前端开发中，布局和定位是至关重要的概念，它们决定了网页元素的排列方式和位置。...在学习过程中，可以参考压缩包中的"day04"文件，它可能包含了相关的代码示例和练习，进一步加深对这些概念的理解。
Web安全基础
1stPeak's Blog
04-01 2539
前言：本人自学时总结的Web安全基础，作为笔记分享给大家，如有错误或有更好的思路和见解，不吝赐教~ 一、Web站点的组成 二、主要安全策略和请求过程 三、网络结构模式B/S&C/S 四、URI/URL/DNS/CDN 五、HTTP/HTTPS 六、Cookie/Session
Web安全基础文章
purvispanwu的博客
10-16 1014
Web 安全
Web前端基础（04）
热门推荐
努力是为了站在万人之中，成为别人的光
08-06 1万+
###定位方式4+1 ###position定位 静态定位(文档流定位):是元素的默认定位方式 格式:position:static 元素显示特点: 块级元素从上到下排列,行内或行内块元素从左向右排列,元素不易实现层叠效果 如何控制元素的位置: 通过外边距. 相对定位 格式:position:relative 元素显示特点: 元素不脱离文档流(元素不管显示到什么位置 仍然占着原来的位置) 如何控制元素的位置: 通过top/left/right/bottom控制元素的显示位置,坐标相对于初始位置
GoWeb基础
小学生的博客
11-18 7367
GoWeb基础 1. Web 简介 文章目录GoWeb基础1. Web 简介1.1 Web应用的工作原理1.2 hello world入门2. Web服务器的创建2.1 使用默认的多路复用器（DefaultServeMux）2.2 使用自己创建的多路复用器3. HTTP协议3.1 简介3.2 HTTP 协议的会话方式3.3 HTTP1.0 和 HTTP1.1 的区别3.4 报文3.4.1 报文格式3.4.2 请求报文3.4.3 响应报文3.5 响应状态码4. 操作数据库4.1 获取数据库连接4.2 增删
Java Web应用开发_04javaWeb基础
共同学习，心怀感激。
03-21 1413
Java Web应用开发_04javaWeb基础04javaWeb基础单元测验4 04javaWeb基础单元测验4 1单选(2分) Tomcat的默认端口是什么?( C ) A.80 B.8009 C.8080 D.8005 2单选(2分) 下列选项中,可以成功修改Tomcat端口号为80的是( A ) A.< Connector port=“80” protocol=“HTTP/1.1”...
【Web基础】用户登录注册案例
Chovy_pyc的博客
10-01 3805
Web开发核心技术
web自动化测试入门篇04——selenium+python基础方法封装
Austin的博客
12-13 1万+
既然选择了python这门语言来实现web自动化，那我们就不得不讲到一个重要的概念，那就是面向对象编程理念中的封装。就字面意思来理解的话，就像是把各种物品放入一个箱子内，日后需要使用的话就必须从这个箱子里拿才可以获取那个放入的物品。而这个比喻内的箱子就是python内的类，而各类物品则是我们自己根据需要自定义的各种属性和数据、方法，后续需要使用这些属性、数据、方法时，只要引入对应的类并实例化即可。
Go语言Web基础--Web工作方式
一只IT小小鸟
07-22 2305
背景 学习基于Web的编程，通过Go来编写Web应用。Go目前已经拥有成熟的HTTP处理包，这使得编写能够做任何事清的动态web程序易如反掌。 Web工作原理 我们平时浏览网页的时候,会打开浏览器，输入网址后按下回车键，然后就会显示出你想要浏览的内容。在这个看似简单的用户行为背后，到底隐藏了些什么呢？ 对于普通的上网过程，系统其实是这样做的：浏览器本身是一个客户端，当你输入URL的时候，首...
04基础入门：WEB源码拓展
qq_52718293的博客
03-08 4932
1.WEB源码作用 用来代码审计漏洞，做信息突破口。 栗子：获取某ASP源码后可以采用默认数据库下载为突破，获取某其他脚本源码漏洞可以进行代码审计挖掘或分析其业务逻辑等，总之源码的获取将为后期的安全测试提供了更多的思路。 2.关于WEB源码目录结构 据库配置文件，后台目录，模板目录，数据库目录等 index.php 根据文件后缀判定 admin 网站后台路径data 数据相关目录 install 安装目录 member 会员目录 template 模板目录(和网站相关的整体架构) data =>
Web应用基础
09-07
学习这些基础知识对于理解Web应用的运作原理至关重要，它们构成了现代Web开发的基础架构，为创建功能丰富、交互性强的网页和Web应用程序提供了工具和方法。通过深入理解和实践这些技术，开发者可以构建出高效、可...
web_sprint04
03-19
【标题】"web_sprint04" 涉及的是一个关于Web开发的课程或项目，其中可能包含第四阶段的学习内容或挑战。由于标签为"JavaScript"，我们可以推测这个项目着重于JavaScript编程语言，特别是与Web相关的应用。 ...
04_Web_Scraping_webscrapping_
09-29
【标题】"04_Web_Scraping_webscrapping_" 涉及的是Python中的网页抓取（Web Scraping）技术，这是一个重要的数据获取手段，尤其在数据分析、信息自动化和网络研究等领域广泛应用。 【描述】"web scrapping in ...
04_http.rar_实现web服务器
09-24
在IT行业中，构建一个Web服务器是一项基础且至关重要的任务，特别是在嵌入式系统中。"04_http.rar_实现web服务器"这个项目专注于在pax270平台上创建一个嵌入式的HTTP服务器，以提供网络服务。下面我们将深入探讨相关...
鹈鹕算法POA-Kmean-Transformer-LSTM组合状态识别分类【含Matlab源码 6749期】.zip
08-02
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化Kmeans-Transformer-lstm分类预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化Kmeans-Transformer-lstm分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化Kmeans-Transformer-lstm分类 4.4.3 灰狼算法GWO/狼群算法WPA优化Kmeans-Transformer-lstm分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化Kmeans-Transformer-lstm分类 4.4.5 萤火虫算法FA/差分算法DE优化Kmeans-Transformer-lstm分类 4.4.6 其他优化算法优化Kmeans-Transformer-Lstm分类
三角测量拓扑聚合器TTAO-Kmean-Transformer-BiLSTM负荷预测【含Matlab源码 6686期】.zip
08-02
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化Kmeans-Transformer-Bilstm预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化Kmeans-Transformer-Bilstm预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化Kmeans-Transformer-Bilstm预测 4.4.3 灰狼算法GWO/狼群算法WPA优化Kmeans-Transformer-Bilstm预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化Kmeans-Transformer-Bilstm预测 4.4.5 萤火虫算法FA/差分算法DE优化Kmeans-Transformer-Bilstm预测 4.4.6 其他优化算法优化Kmeans-Transformer-Bilstm预测
S9300X-V200R021C00SPC100-MPUE主控版本
08-02
S9300X-V200R021C00SPC100-MPUE主控版本，支持S9300X-4/8/12
【创新未发表】Matlab实现哈里斯鹰优化算法HHO-RF实现风电预测算法研究.rar
最新发布
08-02
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
构建基础Web Dynpro应用教程
在SAP NetWeaver 04s的背景下，这个教程将指导开发者完成从创建组件到最后部署的全过程。值得注意的是，版本19.12.2005可能已经过时，但基本原理和流程依然适用。随着时间的推移，SAP对Web Dynpro进行了多次更新和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值