首页网站div制作（div+css概述，css选择器）

最新推荐文章于 2024-06-11 14:34:51 发布
最新推荐文章于 2024-06-11 14:34:51 发布
阅读量1.8k 收藏 17
点赞数
分类专栏： JAVAWEB学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuterabbitbaby/article/details/77982969
版权







代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
#bodydiv {
	border: solid 1px blue;
	width: 90% px;
}

.logodiv {
	border: solid 1px blue;
	width: 33%;
	float: left;
	height: 48px;
}

.clear {
	clear: both;
}

.cd {
	background-color: black;
	height: 30px;
}

.cd a {
	font-size: 20px;
	color: red;
}

.zs {
	width: 100%;
}

.rm {
	border: solid 1px blue;
	width: 100% px;
}

.rm font {
	font-size: 25px;
	color: green;
}

.sp {
	border: solid 1px blue;
	width: 100% px;
	float: left;
}
</style>
</head>
<body>
	<div id="bodydiv">
		<div class=""></div>
		<div>
			<img alt="" src="../imag/head1.png" class="logodiv">
		</div>
		<div>
			<img alt="" src="../imag/head2.png" class="logodiv">
		</div>
		<div class="logodiv">
			<a href="#">登陆</a> <a href="zhuce.html">注册</a> <a href="#">购物车</a>
		</div>
		<div class="clear"></div>
		<div class="cd">
			<a href="shouyediv.html">首页</a> <a href="#">手机数码</a> <a href="#">电脑办公</a>
			<a href="#">研烟酒箱包</a>
		</div>
		<div class="zs">
			<img alt="" src="../imag/dianzi.png" width="100%">
		</div>
		<div class="rm">
			<b><font>热门商品</font>
			</b><img alt="" src="../imag/sign.png">
		</div>
	</div>
	<div>
		<div style="float: left; width: 15%; height: 460px">
			<img alt="" src="../imag/11.png" width=100% height=100%>
		</div>
		<div style="float: left; width: 84%; height: 460px">
			<div
				style="float: left; width: 100%; border: 1px black solid; height: 50%">
				<div style="float: left; width: 39%; height: 100%;">
					<img alt="" src="../imag/12.png" width=100% height=100%>
				</div>
				<div style="float: left; width: 20%; height: 100%;">
					<img alt="" src="../imag/13.png" width=100% height=100%>
				</div>
				<div style="float: left; width: 20%; height: 100%;">
					<img alt="" src="../imag/15.png" width=100% height=100%>
				</div>
				<div style="float: left; width: 20%; height: 100%;">
					<img alt="" src="../imag/15.png" width=100% height=100%>
				</div>
			</div>
			<div
				style="float: left; width: 100%; border: 1px black solid; height: 49%">
				<div style="float: left; width: 20%; height: 100%;">
					<img alt="" src="../imag/14.png" width=100% height=100%>
				</div>
				<div style="float: left; width: 20%; height: 100%;">
					<img alt="" src="../imag/13.png" width=100% height=100%>
				</div>
				<div style="float: left; width: 20%; height: 100%;">
					<img alt="" src="../imag/15.png" width=100% height=100%>
				</div>
				<div style="float: left; width: 20%; height: 100%;">
					<img alt="" src="../imag/15.png" width=100% height=100%>
				</div>
				<div style="float: left; width: 19%; height: 100%;">
					<img alt="" src="../imag/13.png" width=100% height=100%>
				</div>
			</div>
		</div>
	</div>
	<div style="width: 100%">
		<img alt="" src="../imag/ad.png" width="100%">
	</div>
	<div class="zs">
		<img alt="" src="../imag/dianzi.png" width="100%">
	</div>
	<div class="rm">
		<b><font>最新商品</font>
		</b><img alt="" src="../imag/sign.png">
	</div>
	</div>
	<div>
		<div style="float: left; width: 15%; height: 460px">
			<img alt="" src="../imag/11.png" width=100% height=100%>
		</div>
		<div style="float: left; width: 84%; height: 460px">
			<div
				style="float: left; width: 100%; border: 1px black solid; height: 50%">
				<div style="float: left; width: 39%; height: 100%;">
					<img alt="" src="../imag/12.png" width=100% height=100%>
				</div>
				<div style="float: left; width: 20%; height: 100%;">
					<img alt="" src="../imag/13.png" width=100% height=100%>
				</div>
				<div style="float: left; width: 20%; height: 100%;">
					<img alt="" src="../imag/15.png" width=100% height=100%>
				</div>
				<div style="float: left; width: 20%; height: 100%;">
					<img alt="" src="../imag/15.png" width=100% height=100%>
				</div>
			</div>
			<div
				style="float: left; width: 100%; border: 1px black solid; height: 49%">
				<div style="float: left; width: 20%; height: 100%;">
					<img alt="" src="../imag/14.png" width=100% height=100%>
				</div>
				<div style="float: left; width: 20%; height: 100%;">
					<img alt="" src="../imag/13.png" width=100% height=100%>
				</div>
				<div style="float: left; width: 20%; height: 100%;">
					<img alt="" src="../imag/15.png" width=100% height=100%>
				</div>
				<div style="float: left; width: 20%; height: 100%;">
					<img alt="" src="../imag/15.png" width=100% height=100%>
				</div>
				<div style="float: left; width: 19%; height: 100%;">
					<img alt="" src="../imag/13.png" width=100% height=100%>
				</div>
			</div>
		</div>
	</div>
	<div>
		<img alt="" src="../imag/q.png" width="100%">
	</div>
	<div style="text-align: center;">
		<a href="html.html">关于我们</a> 公司简介 招贤纳士 广告服务 联系方式 合作伙伴 论坛反馈<br>版权声明：Copyright
		© 1999-2016,赵瑾的网站 , All Rights Reserved
	</div>
</body>
</html>


cuterabbitbaby
关注
  • 0
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS基础以及使用DIV+CSS完成网站首页、注册页面优化
qq_45100706的博客
05-14 1394
1.CSS样式 表格布局的缺陷： ​ 1.嵌套太多，容易出现顺序错乱 ​ 2.表格布局的页面不灵活，改变其中一个模块时，其他的布局结构也会发生改变 1.1 CSS概述： ​ Cascading Style Sheets（层叠样式表） ​ CSS作用：美化页面、将HTML内容和美化内容进行分离 ​ 简单语法： 选择器{ 属性名：属性值; 属性名：属性值 } 1.2 HTML的...
div＋css div+css divcss布局入门教程 迅雷下载
09-16
例如，通过给一个内容块套上 DIV 并加上唯一的 id，我们就可以用 CSS 选择器来定义每一个页面元素的外观表现。 知识点5：布局和样式定义 每一个内容块都可以放在页面上任意地方，再指定这个块的颜色、字体、边框、...
【使用DIV+CSS重写网站首页案例】步骤分析与代码实现
u012161251的博客
06-02 623
使用DIV+CSS重写网站首页案例 步骤分析： 第一步：先定义一个大的 div（整个页面），然后嵌套 8 个小的 div（共八行）； 第二步：(第一行)在第一个 div 里面嵌套 3 个小的 div； 第三步：(第二行)在小 div 里面写一个列表标签(需要使用 css 的 display 属性的 inline)； 第四步：(第三行)在小 d...
大一学生《web课程设计》用DIV+CSS技术设计的个人网页（网页制作课作业）
最新发布
网页设计与制作 | HTML+CSS+JS
06-11 636
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大
【使用DIV+CSS重写网站首页案例】CSS选择器
u012161251的博客
06-01 217
使用表格<table></table>对网站首页进行布局有缺陷，不能拖动版块，不灵活。 DIV Div是一个html的标签，单独使用没有意义，必须结合CSS使用； 是一个块级元素，单独占一行； 它主要用于页面的布局； Span Div是一个html的标签，单独使用没有意义，必须结合CSS使用； 是一个内联元素，显示一行； 它主要用于对括...
HTML&CSS——使用DIV和CSS完成网站首页重构
小强博客
01-17 8304
需求分析 技术分析 1、DIV 相关的技术 Div 它是一个 html 标签，一个块级元素(单独显示一行)。它单独使用没有任何意义，必须结合CSS来使用。它主要用于页面的布局。 Span 它是一个 html 标签，一个内联元素(显示一行)。它单独使用没有任何意义，必须结合CSS 来使用。它主要用于对括起来的内容进行样式的修饰。 2、CSS 的作用 HTML：它是整个网站的骨架。 CSS：它是对整...
DIV+CSS实现商城首页
m0_37286282的博客
07-23 3104
用table可以实现一个布局，但是远没有div+css来的强大。基本上所有的网页开发时的布局都是用的div+css，div知识一个框架，没有css的配合也是不行的。 #father{ border: 1px solid red; width:1300px; height: 2000px; margin: auto; } #logo{ bo
DIV-CSS.zip_DIV CSS_HTML+CSS网页_html CSS_html+css_html+div+css
09-21
如何通过CSS选择器来选择和操作这些<div>元素，设置颜色、字体、边距、边框等样式属性；以及如何利用CSS的布局技术如浮动、定位、Flexbox或Grid来实现复杂的页面布局。此外，可能还会涉及到响应式设计，使得网页在...
纯div+css轮播图片切换图片
11-07
例如，可以创建多个包含图片的div，然后利用CSS选择器和定时器来交替更改这些div的`display`属性，从而实现图片的切换效果。 二、电子相册 电子相册是图片切换的一种高级形式，它通常包含更多的交互功能，如导航...
简单的网页制作案例（DIV+CSS完成）：个人网站
05-01
在这个"简单的网页制作案例"中，我们将探讨如何使用`DIV+CSS`来创建一个个人网站。 首先，了解`DIV`的基本概念至关重要。`<div>`是HTML中的一个块级元素，它本身没有特定的含义，但可以用于包裹其他元素，提供一个...
简单的网页制作案例（DIV+CSS完成）：旅游网站2
05-01
在使用CSS时，我们可以利用`div`元素作为容器来组织内容，通过类选择器或ID选择器来应用样式。例如： ```css .header { background-color: #f8f9fa; padding: 20px; } .main { display: flex; flex-wrap: wrap...
网页制作（div+css）
10-19
网页制作，属于几个网页的制作，使用的模式是div + css 模式
一个简单易懂的div+CSS写的博客首页
08-15
一个很好懂得CSS+DIV例子，适合新手看，页面也好看的例子
用DIV+CSS技术设计的个人网页（网页制作课作业）
12-07
关于网页制作课程的作业，使用DIV+CSS技术设计的个人主页，有需要的朋友可以下载，挺简洁的
Div+Css实现网站首页
05-26
div+css实现网站首页排版，这样可以制作好网站首页
css+div首页框架
07-13
NULL 博文链接：https://wlhx.iteye.com/blog/745556
DIV+CSS搭建（淘宝首页）布局图
热门推荐
小柒的前端之旅
03-19 3万+
制作网页时，构建页面布局图很重要。布局前的结构划分避免造成混乱。 下面的代码只有DIV+CSS的网页结构布局。没有将最终的淘宝静态页面的代码放上去，只有布局图和最终页面的比较图。 搭建的布局图与最终效果的一个比较： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...
div+css搭建网站
learnerq的博客
11-12 910
一，分析页面结构 如一个页面有导航栏 该结构在分析时应从大到小进行分析 首先是一个大div里面套有3个小div 中间的div是一个ul li结构 一，应设置body的属性比如字体大小和类型 二，应设置父div的宽，高由内容填充 三，导航栏 第一部分是一张图片设置它的margin-right和float为left 第二部分是一个ul li结构的导航条
用div和css制作网页,DIVCSS网页设计总结:有用的3个网页制作_css
weixin_32188111的博客
08-03 1098
网页制作Webjx文章简介：DIVcss网页设计总结:有用的3个网页制作技巧.我们在进行DivCSS布局的时候，非常关注CSS技巧的学习，今天向大家推荐3个所谓的 “顶级”CSS技巧！虽然没有什么新意，但对新手而言却非常重要！一、在一行内声明CSSh2{font-size:18px;border:1pxsolidblue;color:#000;background-color:#FFF...
div+css入门指南：统一风格与选择器详解
第四章深化对css选择器的理解，例如后代选择器的规则、id选择器的优先级以及类选择器的使用策略。还介绍了选择器优先级的比较，明确了!important、行内样式、id选择器等在优先级中的位置。这部分内容对于理解和解决...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值