网页首页优化（块标签）（css）

最新推荐文章于 2024-07-09 17:45:40 发布
最新推荐文章于 2024-07-09 17:45:40 发布
阅读量63 收藏
点赞数
分类专栏： 块标签 基础 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SHI_LUO_DE_YI_JI/article/details/108476572
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.logo{
				float:left;
				width: 33%;
				height: 60px;
			}
			
			.amenu{
				color: white;
				text-decoration: none;
				line-height: 50px;
			}
			.production{
				width: 16%;height:240px;float: left;text-align: center;
			}
			
		</style>
	</head>
	<body>
		<!--
        	作者：offline
        	时间：2020-09-06
        	描述：
        	1.嵌套一个最外层div
        	2.logo部分：嵌套三个divr
        	3。导航栏部分：放置5个超链接
        	4.轮播图
        -->
        <!--1.嵌套一个最外层div-->
        <div>
        	<!--2.logo部分：嵌套三个div-->
        	<div class="logo">
        		<img src="../../js/img/logo2.png"/>
        	</div>
        	<div class="logo">
        		<img src="../../js/img/header.jpg" />
        	</div>
        	<div class="logo">
        		<a href="a">登录</a>
        		<a href="a">注册</a>
        		<a href="a">解决问题</a>
        	</div>
        	<div style="clear: both;"></div>
        	<!--3。导航栏部分：放置5个超链接-->
        	<div style="background-color: black;height: 50px;">
        		<a href="a" class="amenu">首页</a>
        		<a href="a" class="amenu">手机数码</a>
        		<a href="a" class="amenu">电脑办公</a>
        		<a href="a" class="amenu">鞋靴箱包</a>
        		<a href="a" class="amenu">香烟酒水</a>
        		
        	</div>
        	<!--4.轮播图-->
        	<div style="width: 100%;">
        		<img src="../../js/img/1.jpg" width="100%" height="100%"/>
        	</div>
        	<!--5.最新商品部分-->
        	<div>
        		<div>
        			<h2>最新商品<img src="../../js/img/title2.jpg"></h2>
        		</div>
        		<div style="width: 15%;height:480px;float: left;">
        			<img src="../../资料/WEB01/products/hao/big01.jpg" width="100%" height="100%"/>
        		</div>
        		<div style="width: 84%;height=480px;float: left;">
        			<div style="width:50%;height:240px;float: left;">
        				<img src="../../资料/WEB01/products/hao/middle01.jpg" width="100%" height="100%"/>
        			</div>
        			<div class="production">
        				<img src="../../资料/WEB01/products/hao/small08.jpg"/>
        				<p>高压锅</p>
        				<p style="color: red;">¥988</p>
        			</div>
        			<div class="production">
        				<img src="../../资料/WEB01/products/hao/small08.jpg"/>
        				<p>高压锅</p>
        				<p style="color: red;">¥988</p>
        			</div>
        			<div class="production">
        				<img src="../../资料/WEB01/products/hao/small08.jpg"/>
        				<p>高压锅</p>
        				<p style="color: red;">¥988</p>
        			</div>
        			<div class="production">
        				<img src="../../资料/WEB01/products/hao/small08.jpg"/>
        				<p>高压锅</p>
        				<p style="color: red;">¥988</p>
        			</div>
        			<div class="production">
        				<img src="../../资料/WEB01/products/hao/small08.jpg"/>
        				<p>高压锅</p>
        				<p style="color: red;">¥988</p>
        			</div>
        			<div class="production">
        				<img src="../../资料/WEB01/products/hao/small08.jpg"/>
        				<p>高压锅</p>
        				<p style="color: red;">¥988</p>
        			</div>
        			<div class="production">
        				<img src="../../资料/WEB01/products/hao/small08.jpg"/>
        				<p>高压锅</p>
        				<p style="color: red;">¥988</p>
        			</div>
        			<div class="production">
        				<img src="../../资料/WEB01/products/hao/small08.jpg"/>
        				<p>高压锅</p>
        				<p style="color: red;">¥988</p>
        			</div>
        			<div class="production">
        				<img src="../../资料/WEB01/products/hao/small08.jpg"/>
        				<p>高压锅</p>
        				<p style="color: red;">¥988</p>
        			</div> 
        		</div>
        	</div>
        	
        	<div>
        		<img src="../../资料/WEB01/products/hao/ad.jpg" width="100%"/>
        	</div>
        	<!--5.最新商品部分-->
        	<div>
        		<div>
        			<h2>最新商品<img src="../../js/img/title2.jpg"></h2>
        		</div>
        		<div style="width: 15%;height:480px;float: left;">
        			<img src="../../资料/WEB01/products/hao/big01.jpg" width="100%" height="100%"/>
        		</div>
        		<div style="width: 84%;height=480px;float: left;">
        			<div style="width:50%;height:240px;float: left;">
        				<img src="../../资料/WEB01/products/hao/middle01.jpg" width="100%" height="100%"/>
        			</div>
        			<div class="production">
        				<img src="../../资料/WEB01/products/hao/small08.jpg"/>
        				<p>高压锅</p>
        				<p style="color: red;">¥988</p>
        			</div>
        			<div class="production">
        				<img src="../../资料/WEB01/products/hao/small08.jpg"/>
        				<p>高压锅</p>
        				<p style="color: red;">¥988</p>
        			</div>
        			<div class="production">
        				<img src="../../资料/WEB01/products/hao/small08.jpg"/>
        				<p>高压锅</p>
        				<p style="color: red;">¥988</p>
        			</div>
        			<div class="production">
        				<img src="../../资料/WEB01/products/hao/small08.jpg"/>
        				<p>高压锅</p>
        				<p style="color: red;">¥988</p>
        			</div>
        			<div class="production">
        				<img src="../../资料/WEB01/products/hao/small08.jpg"/>
        				<p>高压锅</p>
        				<p style="color: red;">¥988</p>
        			</div>
        			<div class="production">
        				<img src="../../资料/WEB01/products/hao/small08.jpg"/>
        				<p>高压锅</p>
        				<p style="color: red;">¥988</p>
        			</div>
        			<div class="production">
        				<img src="../../资料/WEB01/products/hao/small08.jpg"/>
        				<p>高压锅</p>
        				<p style="color: red;">¥988</p>
        			</div>
        			<div class="production">
        				<img src="../../资料/WEB01/products/hao/small08.jpg"/>
        				<p>高压锅</p>
        				<p style="color: red;">¥988</p>
        			</div>
        			<div class="production">
        				<img src="../../资料/WEB01/products/hao/small08.jpg"/>
        				<p>高压锅</p>
        				<p style="color: red;">¥988</p>
        			</div> 
        		</div>
        	</div>
        	<div>
        		<img src="../../资料/WEB01/products/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%">
        	</div>
        	<div style="text-align: center;">
        		<a href="a">关于我们</a>
        		<a href="a">联系我们</a>
        		<a href="a">招贤纳士</a>
        		<a href="a">法律声明</a>
        		<a href="a">友情链接</a>
        		<a href="a">支付方式</a>
        		<a href="a">配送方式</a>
        		</br>
        		<h3>GG<h3>
        	</div>
        </div>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

SHI_LUO_DE_YI_JI
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【html】常见的行标签（inline）、块标签（block）和行块标签（inline-block）特点及相互转换
m0_50947589的博客
04-13 1万+
行标签（inline）、块标签（block）和行块标签（inline-block）的特点及相互转换
css一起控制多个标签,纯css实现多标签浮动居中（任意个数）
weixin_35316354的博客
08-04 1284
在做的一个网页上有一块要用浮动标签，具体就是网页底部有未知数量，未知尺寸的元素要水平居中，有点类似于分页器。首先，我们先新建一个容器con，就是标签的爸爸，用来控制标签在页面的位置，.father{position:absolute;width:100%;height:30px;bottom:0;}接下来分析子元素的属性，因为元素的尺寸是未知的(主要是宽度)，所以不能给固定宽度，标签的个数也是未知...
html入门（块级标签介绍）
weixin_33788244的博客
03-31 135
块级标签 1.块级标签的特点：独占一行 2.块级标签的种类： （1） <!--hx标签标题--> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6&l...
html常见块状标记,HTML 常用块状标签有哪些?
weixin_35782250的博客
06-21 2889
HTML 常用块状标签有哪些?html 文档和 HTML 元素是通过 HTML 标签进行标记的, HTML 标签由开始标签和结束标签组成, 下面我们来看一下 HTML 中常用的块状标签.什么是块级标签? 我们可以通过一个简单的方式来判定, 那就是在网页上单击右键选择 "审查元素", 在审查元素当中显示为可折叠的就是块状标签.那么常见的块状标签有哪些呢?标题标签,,...... 以此类推, 其中, ...
HTML+CSS写网站首页
m0_45434283的博客
10-13 9562
(html+css写网站首页) HTML <html> <head> <meta charset="UTF-8"> <title>网站建设</title> <link rel="stylesheet" type="text/css" href="css/Travel.css" /> </head>...
【网页前端】HTML块标签以及框架标签
专注于Java领域开发 关注我 带你玩转Java
07-20 943
学习块标签span以及div 自学扩展内容frameset标签
电商网页设计(html+css)
L221304的博客
02-19 620
电商页面
css怎么把多个块合并,CSS外边距合并&块格式上下文
weixin_39590601的博客
08-04 585
前言之前在前端开发的过程中，都没有遇到外边距合并的问题(其实是因为大多时候都直接用前端样式库(〃'▽'〃))，这一次需要动手排一个页面，也挺简单，但是遇到了一个奇怪的问题，所以学习记录一下。问题测试代码如下：test* {margin: 0;padding: 0;}body {max-width: 750px;margin: 0 auto;}.div1 {background: yellow;he...
浅谈html5标签css3的常用样式
09-27
在HTML5中，新增了许多语义化的标签，使得网页结构更加清晰，易于理解和搜索引擎优化。CSS3则引入了大量的新样式和动画效果，极大地提升了网页的视觉表现力。 HTML5标签的常见新增包括： 1. `<header>` 和 `...
CSS3透明方块碎片登录框特效.zip
10-09
【标签】"jQuery特效 CSS特效 网页特效"揭示了这个资源的核心技术。首先，jQuery是一个广泛使用的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画效果。在这个特效中，jQuery可能被用来处理用户交互，如...
网页头部优化建议
09-22
在网页设计中，头部优化是提升用户体验、提高搜索引擎友好度以及网站性能的关键环节。本文将围绕网页头部优化中的logo优化和水平菜单设计两方面进行详细阐述。 首先，我们来看logo优化。Logo作为网站的视觉标识，其...
html css js网页设计大一笔记
03-26
在学习HTML、CSS和JavaScript的过程中，大一学生通常会从基础语法开始，逐步掌握网页的基本构建块。随着技能的提升，他们将学习如何创建交互式表单、实现动态效果、优化网页性能等高级话题。同时，理解Web标准、编写...
网页切图的CSS和布局经验与要点
09-25
1. **LOGO处理**：网站LOGO通常使用`<h1>`配合`<a>`标签，通过CSS的`background-image`属性实现以图换字，设置适当的宽度和高度，并利用`text-indent`和`overflow:hidden`隐藏文本，以利于SEO优化。 2. **多元素...
CSS 样式链接的多方面应用与最佳实践
Lesleyhnj的博客
07-04 296
在网页开发中，CSS 样式链接是通过在HTML文档中的<link>标签或者通过<style>标签内部定义的方式来引入和应用CSS样式表。这些样式表包含了诸如颜色、字体、布局等方面的规则，使得开发者能够将设计风格和布局应用到整个网站或特定页面的各个元素上。
css—圆角渐变边框+透明背景色
heal_l的博客
07-09 92
【代码】css—圆角渐变边框+透明背景色。
css使用伪元素after或者before的时候想要给after设置z-index无效
qq_49416650的博客
07-05 311
css使用伪元素after或者before的时候想要给after或者before设置一个层级关系，使该伪类写入的样式在box的下面，发现给box设置z-index无效，需要找到父级元素，在父级元素上设置z-index值并且将伪类设置z-index:-1。
CSS 图标：简化设计，优化用户体验
Lesleyhnj的博客
07-04 460
CSS 图标指的是使用CSS样式来绘制和渲染的各种图标和符号，通常是基于矢量图形的形式。与传统的图像图标相比，CSS 图标具有几个显著的优势：通过CSS创建的图标不依赖于外部图像文件，而是直接通过CSS代码进行绘制，这意味着可以在不增加额外HTTP请求的情况下，直接在网页上展示图标，从而加快页面加载速度。
使用css做一个旋转的八卦图
weixin_40923558的博客
07-02 396
【代码】使用css做一个旋转的八卦图。
html&css基础
最新发布
antyuki的博客
07-09 432
/
html5+css3ppt课件.ppt
11-16
这份课件深入浅出地讲解了如何利用HTML5的语义化元素提升网页结构的可读性和搜索引擎优化，并结合CSS3进行美化和布局设计，对于学习和实践Web开发的人员来说是一份有价值的参考资料。通过掌握这些知识，开发者可以更...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值