使用html+css实现网页布局案例

最新推荐文章于 2024-05-24 12:47:35 发布
最新推荐文章于 2024-05-24 12:47:35 发布
阅读量6k 收藏 147
点赞数 21
分类专栏： 前端实战小案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tracy_Yuan2014/article/details/109907406
版权

使用html+css实现网页布局案例

以前学习或者练习的案例代码都没有做整理，所以这段时间在回顾一下过去写的案例巩固下基础知识点

项目代码：github。

效果

静态效果

在这里插入图片描述

动图效果

在这里插入图片描述

代码结构

在这里插入图片描述

代码

html

<!DOCTYPE html>
<html>
<head>
  <title>css网页页面</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" href="css/main.css"/>
</head>
<body>
  <!--头部-->
  <div class="header">
    <div class="logo">
      <img src="image/logo.png" />
    </div>
    <div class="menu">
      <ul>
        <li>手记</li>
        <li>视频</li>
        <li>图片</li>
        <li>首页</li>
      </ul>
    </div>
  </div>
  <!--主体-->
  <div class="main">
    <div class="pic">
      <img src="image/1.jpeg">
    </div>
    <!--遮罩层-->
    <div class="topLayer">

    </div>
    <div class="btn">
      <p>MY BEAUTIFUL LIFE</p>
      <button>LOOK MORE &nbsp;&nbsp;&gt;</button>
    </div>
    <!-- 内容展示区 -->
    <div class="content">
      <!-- 上部分 -->
      <div class="top">
        <div>
          <div class="icon weibo">
            <img src="image/weibo.png">
            <div class="des">MICROBLOG</div>
          </div>
          <div class="icon weixin">
  						<img src="image/weixin.png" alt="">
  						<div class="des">WECHAT</div>
  					</div>
  					<div class="icon qq">
  						<img src="image/qq.png" alt="">
  						<div class="des">QQ</div>
  					</div>
        </div>
        <div class="recept">
          "I want to give good things to record down,<br>
          after the recall will be very beautiful."
        </div>
        <!-- 中间部分 -->
        <div class="picAndDes">
					<div class="icon2 ">
						<img src="image/03-01.jpg" alt="">
						<div class="des1">Cool Image</div>
						<div Class="des2">Record The Picture</div>
					</div>
					<div class="icon2">
						<img src="image/03-02.jpg" alt="">
						<div class="des1">Great Picture</div>
						<div class="des2">Record The Picture</div>
					</div>
					<div class="icon2">
						<img src="image/03-03.jpg" alt="">
						<div class="des1">Cool Image</div>
						<div class="des2">Record The Picture</div>
					</div>
				</div>
      </div>
      <div style="clear:both;"></div><!-- 不加这句话的话，下面的背景会上移 -->
      <!-- 下部分 -->
      <div class="bottom"><!--包裹层 -->
        <div class="bottom-content"><!--内容层 -->
          <div class="title">FROM THE PHOTO ALBUM</div>
          <div class="picContent">
						<dl>
							<dt><img src="image/04-01.jpg"></dt>
							<dd>
								Life is like a book, just read more and more refined, more write more carefully. When read, mind open, all things have been indifferent to heart. Life is the precipitation.
							</dd>
						</dl>
						<dl>
							<dt><img src="image/04-02.jpg"></dt>
							<dd>
								Life is like a cup of tea, let people lead a person to endless aftertastes. You again good taste, it will always have a different taste, different people will have different taste more.
							</dd>
						</dl>
					</div>
          <div style="clear: both;"></div>
        </div>
        <div style="clear: both;"></div>
      </div>
      <!-- 下部分 -->
      <div class="">
      </div>
    </div>

  </div>
  <!--底部-->
  <div class="footer">
    © 2016 imooc.com  京ICP备13046642号
  </div>
</body>
</html>

css

*{
  padding:0;
  margin: 0;
}
.header{
  width: 100%;
  height: 100px;
  /*test*/
  /*background-color: black;*/
}
.logo img{
  width: 300px;
  height:85px;
  padding-top: 8px;
  margin-left: 50px;
  float: left;
}
.menu{
  /*test*/
  /*background-color: green;*/
  float: right;
}
.menu ul{
  padding-right: 50px;
}
.menu ul li{
  list-style: none;
  float: right;
  height: 100px;
  line-height: 100px;
  width: 80px;
  font-weight: bold;
  text-align: center;
  font-family: "微软雅黑";
  cursor: pointer;
}
.menu ul li:hover{
  color:red;
}

.main .pic img{
   width: 100%;
   height: 600px;
   position: relative;
}
.main .topLayer{
  width:100%;
  height: 600px;
  position: absolute;
  top:100px;
  left: 0;
  background-color: #000;
  opacity: 0.5;
  z-index: 1;
}
.main .btn{
  width: 500px;
  height: 300px;
  /*test*/
  /*background-color: blue;*/
  position: absolute;
  top:400px;
  margin-top: -150px;
  right: 50%;
  margin-right: -250px;
  text-align: center;
  z-index: 2;
  border:0;

}
.main .btn p{
  padding-top: 100px;
  color:#fff;
  font-size: 45px;
  font-family: "微软雅黑";
  font-weight: bold;
}
.main .btn button{
  margin-top: 50px;
  width: 200px;
  height: 60px;
  color:#fff;
  font-family: "微软雅黑";
  font-size: 14px;
  background-color: #F5704F;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
  border:0;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  cursor: pointer;
}

.main .btn button:hover{
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.main .content{
  color: #7c7d7f;
	font-size: 20px;
	font-weight: bold;
}

.main .content .top{
	width: 1000px;
	padding-top: 50px;
	margin:0 auto;
}
.main .content .top .icon{
  float: left;
  width: 33.3%;
  padding-top: 50px;
  text-align: center;
}
.main .content .top .icon img{
  width: 100px;
  height: 100px;
}
.main .content .top .icon .des{
	padding-top: 20px;
}
.main .content .top .recept{
  padding-top: 50px;
  clear: both;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  font-style: italic;
  color:#E19796
}
.main .content .top .picAndDes{
  padding-top: 50px;
}
.main .content .top .picAndDes .icon2{
  float: left;
  padding: 10px;
  text-align: center;
}
.main .content .top .picAndDes .icon2 img{
  width: 310px;
  height: 260px;
}
.main .content .top .picAndDes .icon2 .des1{
	padding-top: 10px;
	font-size: 20px;
	font-weight: bold;
	color: #7c7d7f;
}
.main .content .top .picAndDes .icon2 .des2{
	color: #BDBDBC;
	padding-top: 10px;
}
.main .content .bottom{
  width: 100%;
  padding-top: 30px;
  background-color: #F9F9F9;
}
.main .content .bottom .bottom-content{
  width: 1000px;
  margin: 0 auto;
  margin-bottom: 50px;
  /**test**/
/**  background-color: black;**/
}
.main .content .bottom .bottom-content .title{
  text-align: center;
  padding-top: 50px;
  font-family: "微软雅黑";
  padding-bottom: 40px;
  font-size: 20px;
}
.main .content .bottom .bottom-content .picContent dl{
  width: 470px;
  float: left;
  margin: 10px 12px;
}
.main .content .bottom .bottom-content .picContent dl dt img{
	width:470px;
	height:480px;
}
.main .content .bottom .bottom-content .picContent dl dd{
	padding-top: 20px;
}

.footer{
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background-color: #292C35;
	color: #ffffff;
  font-family: "微软雅黑";
	font-size: 15px;
}
leeeeeenas
关注
  • 21
    点赞
  • 踩
  • 147
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html+css过渡案例案例一
cxyym8的博客
06-07 191
Document div{ width: 200px; /*设置宽度为200PX*/ } .box{ height: 200px; /*设置高度为200PX*/ } #box{ bac
html、css 实现网页布局（高度适应内容）
Zhangguohao666的博客
12-10 2688
利用html、css实现网页布局：两栏布局、三栏布局（浮动实现、定位实现）、后台管理系统的布局
html css javascript web网页设计案例大全
09-29
内含html css javascript web经典案例还有css2.0手册DIV+CSS网站布局web实用网页设计方法是学习web前台技术的必备资料
30个HTML+CSS前端开发案例（完结篇）
热门推荐
终成大师的博客
02-14 1万+
30个HTML+CSS前端开发案例（完结篇）
HTML5期末大作业：HTML+CSS茶叶官网网页设计实例 企业网站制作
最新发布
网页设计与制作 | HTML+CSS+JS
05-24 441
💄美妆介绍、👜美妆分享、👒 品牌化妆品官网网站 、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设
基于HTML5+CSS3的网页设计与实现
kkkioe的博客
06-09 2969
摘要：随着互联网技术的不断发展，电子设备的广泛应用和高普及度，网页作为互联网信息的重要载体，其网页设计技术将面临新的挑战。HTML和CSS作为网页前端开发所运用的主要核心技术，如何灵活运用，使得web开发出来的网页设计满足绝大多数用户需求是技术人员和项目负责人的核心工作之一。文章以介绍XX主题网站首页页面为对象，实现基于HTML5+CSS3的网页页面设计与优化。...
HTML+CSS项目案例
qq_52108058的博客
11-30 3536
案例演示：（table、tr、td、th的练习）案例演示：（文本样式图片标签练习）案例演示：（文本样式练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）
【带给你不一样的思路】纯 CSS + HTML 实现几个好看的案例
qq_56352725的博客
11-29 763
一些简单的前端案例，适合刚入门 HMTL + CSS 的学者进行练习哦！！！练习重点：定位！！！
《html+css+javascript 网页制作案例教程》源代码
04-02
CSS布局技术包括盒模型、流体布局、网格系统以及Flexbox和Grid布局，这些都是现代网页设计中的重要工具。例如，`display:flex`可以创建一个弹性布局容器，使得子元素可以按需自动调整尺寸和顺序。 JavaScript是前端...
Div+CSS 3.0网页布局案例精粹
12-29
《Div+CSS 3.0网页布局案例精粹》是一本深入探讨网页设计技术的书籍，专注于使用Div和CSS 3.0进行高效、灵活且响应式的网页布局。Div是HTML中的一个容器元素，用于组织网页内容，而CSS 3.0则是层叠样式表的最新版本...
HTML5+CSS3网页设计模板(30例)zip
03-15
例如，你可以观察模板中如何使用新的HTML5元素来组织内容，以及CSS3如何实现复杂的布局和动画效果。这些实例对于实战练习和快速上手非常有帮助。 总之，这个资源包提供了一个宝贵的学习平台，通过研究这些...
《HTML5+CSS3网页设计案例教程》
06-17
《HTML5+CSS3网页设计案例教程》是一本专注于教授现代网页设计技术的教材，它涵盖了HTML5和CSS3这两个核心的Web开发语言。HTML5是超文本标记语言的第五次重大修订，而CSS3则是层叠样式表的最新版本，它们一起为创建...
HTML+CSS+JavaScript实现网页版随机抽签.zip
06-12
本项目"HTML+CSS+JavaScript实现网页版随机抽签.zip"显然是一个使用这三种技术来创建的互动抽签应用。 首先，HTML部分是构建抽签应用的基础框架。它定义了页面的基本结构，包括标题、段落、按钮等元素。例如，可能...
制作一个简单HTML中华传统文化网页（HTML+CSS）
HTML网页设计
08-02 1万+
📔网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
30个html+CSS和html5动画经典案例
qq_53863770的博客
06-13 3112
素材依赖https://www.icodingedu.com/goods/show/82?targetId=91&preview=0
HTML+CSS实例（米柚页面）
qq_56610467的博客
11-24 1748
米柚页面 基于HTML+CSS纯静态网络页面实例概述： 纯静态页面实现，没有js相关内容故难度不大，要求要会HTML基本的标签用法和CSS基本样式用法即可完成，页面的框架搭建是使用组合完成，图片使用，位置调整效果： 实现分析：首先我们要知道素材的基本参数（颜色&长宽）使用HBuilder X找到图片颜色属性 使用电脑画图工具找颜色/长宽 根据图片素材以及页面实现后的展示，可以分析出整个页面都是以的宽度居中后，形成的一条中轴线，其他的布局都是以的宽度进行的操作。下一步，分析页面图片的一个插入方式，不是所有的图
仿写百度百家号页面
weixin_45442347的博客
08-29 981
全程写了一下午，大概持续作战六个小时，初学web有很多东西记不清，知识还不能很熟练运用，不断试错，最终差不多仿写出了这个页面http://baijiahao.baidu.com/s?id=1708581129511349149 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>百度百家号页面</title> <style typ
html css 制作网页实列,CSS网页制作布局实例教程
weixin_42511491的博客
06-24 1313
CSS混沌初开V：侧边栏导航菜单的实现首先对教程的第四部分作一点补充。有人建议Blog的标题最好使用H1标签，以文本的形式表现标题内容，原因是不论是在CSS关闭的情况下，还是对于搜索引擎的抓取，H1标签结合文本的形式都具有更好的可访问性。这个提议很有道理，很多人也是这么做的，所以我也建议大家对之前的代码进行调整。若使用H1标签来实现Blog标题，又想保持原来标题位置的图片的话，那么就有必要了解一下...
前端html+css（基础+案例）
weixin_43366437的博客
07-25 1201
html基础入门
html+css+javascript网页制作案例教程
06-28
### 回答1： HTML、CSS 和 JavaScript 是网页制作的三大基础技术，它们分别负责网页的结构、样式和交互。以下是一个简单的网页制作案例教程： 1. 创建 HTML 文件，定义网页的基本结构，包括头部、主体和底部。 2. 在头部中添加 CSS 样式表，定义网页的样式，包括字体、颜色、布局等。 3. 在主体中添加 HTML 元素，包括标题、段落、图片、链接等。 4. 在 CSS 样式表中定义这些元素的样式，如字体大小、颜色、边框等。 5. 使用 JavaScript 添加交互功能，如按钮点击事件、表单验证等。 6. 最后，测试网页在不同浏览器和设备上的兼容性，进行调试和优化。 以上是一个简单的网页制作案例教程，希望对您有所帮助。 ### 回答2： 网页制作是一门需要掌握多种技术的艺术。其中，HTML、CSS、JavaScript是非常重要的三种语言。HTML可以创建网页的结构和内容，CSS可以为网页添加样式和布局，JavaScript可以为网页添加动态效果和交互功能。一般来说，学习这三种语言要分三个阶段进行。 首先是HTML。HTML是网页设计的基础，它定义了网页的结构和内容。在学习HTML时，要了解HTML的标签和属性，以及如何使用它们创建网页。可以通过学习HTML教程和实践案例来掌握这些知识。例如，创建一个简单的网页，并使用HTML标签创建页面标题、段落、图片和链接等元素。 接下来是CSS。CSS可以为网页添加样式和布局。学习CSS需要了解各种样式和属性，以及如何将它们应用到网页上。同样，通过学习CSS教程和实践案例来掌握这些知识。例如，创建一个基本的样式表，并使用CSS定义网页元素的颜色、字体、大小和布局等属性。 最后是JavaScript。JavaScript可以为网页添加动态效果和交互功能。学习JavaScript需要了解基本的语法和DOM操作，以及如何编写JavaScript函数和事件处理程序。同样，通过学习JavaScript教程和实践案例来掌握这些知识。例如，创建一个JavaScript函数，响应鼠标事件并显示网页上的动态效果。 总之，在学习网页制作的过程中，需要不断学习和实践，掌握HTML、CSS和JavaScript的基本知识和技能。通过学习案例教程，可以更加深入地了解网页制作的整个过程，从而提升自己的网页制作能力。 ### 回答3： HTML、CSS和JavaScript是网页制作的三大基本技术，它们可以帮助我们构建出丰富多彩、交互性强的网页。在学习这些技术时，我们可以结合案例教程来学习，这样可以更加深入地理解这些技术的应用。 一、HTML案例教程 HTML是网页制作的基础，我们可以用HTML来定义网页的结构和内容。在实际的制作过程中，我们可以通过案例教程来学习如何使用HTML来构建网页。 例如，我们可以学习如何创建一个基本的网页结构，如何使用HTML标签来设置网页的标题、段落、列表等内容。还可以学习如何使用表格、表单等元素来展示和收集数据。 二、CSS案例教程 CSS是用于网页样式的技术，它可以帮助我们美化网页、让网页看起来更加美观。在学习CSS时，我们可以通过案例教程来掌握如何使用CSS来定义网页的样式。 例如，我们可以学习如何使用CSS选择器来选中网页中的元素，并设置它们的颜色、字体、大小等样式。还可以学习如何使用CSS布局来实现复杂的网页布局效果。 三、JavaScript案例教程 JavaScript是用于网页交互的技术，它可以帮助我们实现网页上的交互效果和动态效果。在学习JavaScript时，我们可以通过案例教程来学习如何使用JavaScript来实现这些效果。 例如，我们可以学习如何使用JavaScript来改变网页中元素的内容、样式、位置等，并实现动态效果。还可以学习如何使用JavaScript来处理网页中的用户输入、发送网络请求等操作。 总结： 通过学习以上三大网页制作技术的案例教程，我们可以深入了解它们的应用和相互关系，从而更快地掌握这些技术。同时，在实际的网页制作过程中，也可以用这些案例作为参考，来帮助我们更快地实现网页的设计和功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值