简单网页制作「建议收藏」

简单网页制作「建议收藏」我们以山东理工大学作为实例:1。首先分析网页有几块模块组成(div)组成。大div里面又有几块小div组成。即:画红线代表网页的模块(div).2.用QQ截图来测量网站模块的具体尺寸。然后布

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺


简单网页制作「建议收藏」简单网页制作「建议收藏」


 

 

 我们以山东理工大学作为实例:

1—-。首先分析网页有几块 模块组成(div)组成。大div里面又有几块小div组成。即:画红线代表网页的模块(div).

2—–.用QQ截图来测量网站模块的具体尺寸。然后布局;可用流式布局(float:left)或者position 布局:(分为三种、fixed 绝对定位(小广告)、absolout绝对定位、相对一父级元素、relavtive 相对定位(自身应该出现的位置)

3—–.将浏览器的默认边框打掉 margin 0 ouat  padding 0简单网页制作「建议收藏」

 

4—–开始布局;把模块定义为好几块大的div  大的div里面有分为好几块小的div ;简单网页制作「建议收藏」

 

用流 布局得以下图:

简单网页制作「建议收藏」

 

 


 简单网页制作「建议收藏」


 

5——插入图片  在 内嵌样式 设置背景图片header :简单网页制作「建议收藏」

简单网页制作「建议收藏」

 

6—–  插入小导航  和 小搜索框 :代码如下

 简单网页制作「建议收藏」

然后用流 飘过去 :简单网页制作「建议收藏」

7———–。用ul 设置大导航栏 代码如下

简单网页制作「建议收藏」

简单网页制作「建议收藏」

8——设置轮播图片 代码如下:简单网页制作「建议收藏」

简单网页制作「建议收藏」

9——谁知 轮播地波三个大DIV;然后将三个大DIV分为几个小的DIV如下:

简单网页制作「建议收藏」

简单网页制作「建议收藏」

white-space:nowrap; text-overflow:ellipsis; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; overflow:hidden;

超出隐藏或显示省略号。


 

 然后设置底部导航:

 

 

		<div id="nav_1">
			<ul>
				<li >图书馆</li>
				<li class="nav_a1">▪</li>
				<li>信息公开</li>
				<li class="nav_a1">▪</li>
				<li >招标采购</li>
				<li class="nav_a1">▪</li>
				<li>采供系统</li>
				<li class="nav_a1">▪</li>
				<li>邮件系统</li>
				<li class="nav_a1">▪</li>
				<li>校园VPN</li>
				<li class="nav_a1">▪</li>
				<li>在线学习</li>
				<li class="nav_a1">▪</li>
				<li>地点导航</li>
				<li class="nav_a1">▪</li>
			</ul>
			
		</div>

 

	#nav_1 li{
		  		height: 35px;
		  		/*border: 1px solid red;*/
		  		float: left;
		  		left: 80px;
		  		/*margin-left: 26px;*/
		  		color: black;
		  		font-size: 10px 10px;
		  		margin: 10px -5px 0px 40px;
		  	   line-height: 25px;
		  	}

 简单网页制作「建议收藏」

 

 最后设置小图标:简单网页制作「建议收藏」

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/168385.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号