DIV+CSS首页布局练习 代码

最新推荐文章于 2024-06-02 12:34:52 发布
最新推荐文章于 2024-06-02 12:34:52 发布
阅读量2.2k 收藏 9
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Abenazhan/article/details/72818512
版权

index.html

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

<title>标准首页布局</title>

<link rel="stylesheet" type="text/css" href="css/hh.css"> 

</head>

<body>

<div class="wai">

<div id="head">

<div id="logo">

<a href=" http://baidu.com"><img src="image/1.png" class="tu"></a>

</div>

<div id="banner"></div>

<div id="gjx"></div>

<div class="nav"></div>

<div id="dh">

<ul>

<li><a href="http://baidu.com">qqqqqqqq</a>

</li><li class="shu"></li>

<li><a href="http://baidu.com">hhhh</a>

</li><li class="shu"></li>

<li><a href="http://baidu.com">hhhh</a>

</li><li class="shu"></li>

<li><a href="http://baidu.com">hhhh</a>

</li><li class="shu"></li>

<li><a href="http://baidu.com"></a>

</li><li class="shu"></li>

</ul></div>

</div>

<div class="nav"></div>

<div id="body">

<div id="aa">

<div class="left">

<div class="tit">

<h3>haode haode </h3>

</div>

<div class="nei">

<ul>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

</ul>

</div>

</div>

<div class="right">

<div class="tit">

<h3>haode haode </h3>

</div>

<div class="nei">

<ul>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

</ul>

</div>

</div>

<div class="nav"></div>

<div class="left">

<div class="tit">

<h3>haode haode </h3>

</div>

<div class="nei">

<ul>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

</ul>

</div>

</div>

<div class="right">

<div class="tit">

<h3>haode haode </h3>

</div>

<div class="nei">

<ul>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

</ul>

</div>

</div>

<div class="nav"></div>

<div class="left">

<div class="tit">

<h3>haode haode </h3>

</div>

<div class="nei">

<ul>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

</ul>

</div>

</div>

<div class="right">

<div class="tit">

<h3>haode haode </h3>

</div>

<div class="nei">

<ul>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

<li><a href="http://baidu.com">zxcvbnm</li>

</ul>

</div>

</div>

</div>

<div id="bb"></div>

</div>

<div class="nav"></div>

<div class="gg"></div>

<div class="nav"></div>

<div id="footer"></div>

</div>

</body>

</html>

hh.css 
body

{
 padding:0;

margin:0;

text-align:center;

}

div.wai

{

width:960px;

margin:0 auto;

text-align:left;

}

.nav

{

float:left;

height:10px;

width:100%;

overflow:hidden;

clear:both;

}

#head

{

float:left;

width:100%;

}

#logo

{

width:180px;

height:100px;

margin-top:0px;

float:left;

background:orange;

}

#logo .tu

{

width:120px;

height:70px;

margin-top:13px;

margin-left:30px;

}

#banner

{

width:600px;

height:100px;

background:pink;

float:left;

margin-left:10px;

}

#gjx

{

width:160px;

height:100px;

background:purple;

float:right;

}

#dh

{

width:100%;

height:30px;

background:url(../image/2.jpg);

float:left;

}

#body

{

float:left;

width:100%;

}

#aa

{

width:750px;

float:left;

}

#aa .left

{

float:left;

width:300px;

}

#aa .right

{

width:440px;

float:right;

}

#aa .tit

{

wide:100%;

height:26px;

background:url(../image/2.jpg) 

no-repeat right;

}

#aa .nei

{

wide:100%;

height:174px;

border:1px solid pink;

border-top:1px;

}

#aa .kuan1

{

width:298px !important;

width:300px;

}

#aa .kuan2

{

width:398px !important;

width:400px;

}

#bb

{

width:200px;

height:620px;

background:gray;

float:right;

}

div .gg

{

width:100%;

height:100px;

background:yellow;

float:left;

clear:both;

}

#footer

{

float:left;

width:100%;

height:100px;/*tmp*/

background:blue;

}

img

{

border:none;

margin:0;

padding:0;

}

ul

{

margin:0;

padding:0;

list-style:none;

}

#dh li

{

width:80px;

height:30px;

float:left;

text-align:center;

line-height:30px;

}

#dh .shu

{

width:1px;

height:14px;

background:orange;

overflow:hidden;

margin-top:8px;

}

a

{

font-size:16px;

text-decoration:none;

color:pink;

}

 h3

{

padding:0;

margin:0;

text-align:center;

display:block;width:100%;

}

#aa .left .nei ul

{

color:pink;

margin:0 5px;

}

#aa .left .nei a

{

background:url(../image/3.jpg) 

center no-repeat;

background-size:30% 200%;

background-position:0% 0%;

}

#aa .right .nei a

{

background:url(../image/3.jpg) 

center no-repeat;

background-size:30% 200%;

background-position:0% 0%;

}

#aa .right .nei li

{

width:45%;

float:left;

}



图片

图片

 

Abenazhan
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css格式主页
weixin_45672677的博客
10-24 644
对上一次的代码改进 首页 <html> <head> <title > 这里是我自己的宇宙</title> <style type="text/css"> body { background-image：url('/C:/Users/90964/Desktop/16.jpg'); background-color:rgba(0,255,0,0.5); } .p1 a:link { font-size:40px;
制作一个简单HTML校园网页（HTML+CSS）学校网站制作 校园网站设计.md
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
前端练习-CSS布局
qq_42385482的博客
02-08 1826
前端练习-CSS布局 文章目录前端练习-CSS布局在线练习一、盒模型CSS1 盒模型 - content-boxCSS2 盒模型 - border-boxCSS3 盒模型- 外边距折叠二、浮动CSS4 浮动CSS5 浮动 - 清除三、定位CSS7 定位 - inheritCSS8 定位 - absoluteCSS9 定位 - absolute - 评注CSS10 定位 - z-indexCSS11 定位 - relativeCSS12 定位 - fixedCSS13 定位 - fixed - 广告四、dis
如何使用html、css制作一个期末作业网站【羽毛球体育运动主题html网页设计】
最新发布
专注于dreamweaver网页设计制作
06-02 981
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
HTML网页入门练习——导航栏布局设计
m0_53156691的博客
01-28 2万+
导航栏布局 首先进行页面需求分析，如图所示导航栏分为三部分，包括标志、导航、用户按钮。为了使结构看起来明显，我们使用色块表示，确保结构正确之后再往里面填充内容。 具体步骤如下：
网站开发之DIV+CSS简单布局网站入门篇（五）
杨秀璋的专栏
11-08 1万+
这篇文章主要介绍如何使用DIV和CSS简单布局一个网站的首页，通常将网站划分为顶部（Logo、导航条）、中部（页面主要内容、左右栏目）、底部（制作方介绍、超链接）。这是非常基础的一篇引入性文章，采用案例的方式进行介绍的，希望对你有所帮助。运行结果如下图所示：main.html主页面代码：主要通过div进行布局的，同时用户设置导航条，鼠标悬停时背景颜色切换。css/main.css代码：该部分代码主
DIV+CSS 网页布局心得
09-27
学习DIV+CSS布局，初学者应先掌握HTML基础，理解盒子模型，然后逐步练习布局技巧。使用文本编辑器而非依赖像Dreamweaver这样的可视化工具，可以更好地理解代码和布局原理。同时，不断实践和参考优秀的网页设计案例，...
Div+Css页面布局实战
06-16
9. 实战项目：通过一系列实战案例，如模拟电商首页、博客布局等，锻炼并巩固所学的Div+CSS布局技巧。 课程提供的三个压缩包文件可能是不同章节或课时的资源，包含了课程的讲义、示例代码、练习题等辅助学习材料。...
DIV+CSS布局练习
11-21
这个压缩包文件"DIV+CSS布局练习"显然旨在帮助初学者通过实践掌握这一基础技能。以下是关于`DIV+CSS`布局的一些详细知识点： 1. **DIV元素**：`<div>`（division）是HTML中的一个通用容器元素，用于组织页面内容。...
div+css单页练习html网站模板
04-02
总的来说，这个模板是一个很好的实践平台，有助于深化对div+css布局和单页网站设计的理解，同时也为实际项目提供了起点。通过解构、修改和扩展这个模板，你可以提升自己的前端开发技能，并为未来的设计工作打下坚实...
DIV+CSS页面布局
12-27
使用DIV+CSS布局，我们可以更好地控制网页的外观和结构。 **二、什么是DIV** DIV是一个HTML标签，代表“分部”或“区块”，它用于创建网页上的容器，可以包含其他HTML元素。通过CSS，我们可以为这些DIV设置样式，...
淘宝首屏静态页面（HTML+CSS）布局练习.zip
05-07
适合刚接触前端基础知识的同学，初步了解了HTML+CSS后，可以尝试练习类似项目；该项目主要为HTML+CSS实现，不涉及交互、逻辑功能，旨在提高样式布局能力
CSS网站布局复习题
11-01
CSS网站布局复习题 CSS网站布局复习题
Web入门初学者纯静态页面练习 HTML+CSS 布局、浮动练习
11-23
一个纯静态HTML+CSS单页面练习,牵扯布局、浮动练习。
DIV+CSS首页布局练习
Abenazhan的博客
05-31 5304
新建外部样式，html中设置<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >表示文件格式，在加入<link rel="stylesheet" type="text/css" href="css/hh.css"> 引入外部css链接最先布局一个最外面的层，设置宽度960像素，临时高度800像...
html中div定位练习
weixin_33962621的博客
12-16 432
html中div定位练习，实现简单的计划列表：记录div定位时主要的属性：float、position等，以及对应的relative和absolute等，同时使用到angular js中的数据绑定，$http请求等等，记录备忘： login.css中代码： /* 主页面数据列表 */ .planWrite{ background-color: #...
Html+CSS练习（百度注册页面）--div布局实现
wgf1997的博客
08-07 8835
效果图 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...
HTML与CSS布局技巧总结
热门推荐
bingkingboy的博客
04-11 3万+
很多人对CSS的布局有困惑，实际的应用场景中由于布局种类多难以选择。今天我花些时间总结下自己对CSS布局的理解，分析下了解各种布局的优劣，同时希望能分享给初入前端的朋友们一些在布局上的经验，如果有那些地方总结的不好，欢迎大家指正。言归正传，现在就来揭开各种布局的面纱。 单列布局 <div class="parent"> <div class="child"></div> </div>水平
博客园 页面定制CSS代码
alnxtmp169007749的博客
02-18 894
更新时间：2019-02-18 花了一点时间修改自己的博客背景设置，现在分享一下代码。希望对大家有帮助。我的比较简单，主要代码模板来源于另外一个博主，然后我在基础上进行了部分修改。原博主的连接：https://www.cnblogs.com/Penn000/p/6947472.html。 　　如果希望修改成类似我这样的话->首先博客皮肤选择darkg...
《DIV+CSS网页布局》.docx
12-17
- Div+CSS布局入门，引导学生学习如何使用div元素进行页面布局控制。 - CSS导航菜单设计，讲解如何创建交互式的网站导航。 - 超链接的使用，强调链接的语法和效果。 - HTML列表的创建，包括无序列表、有序列表和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值