div网页布局（做一个简单网页界面为例）

1目标：

2例子部分讲解：

3例子部分讲解：

4完整代码：

1目标：

做一个简易的网页，分为多个模块，背景设置为自己喜欢的图片。添些图片和文字链接跳转，整体排列居中。

网页布局用到的工具 CSS样式

eg:在<haed>中添加这个代码<style type="text/css">才可进行CSS工具的使用。

2例子部分讲解：

如下这个代码主要是用来划分模块，确定位置，确定边框颜色等操作。放在<head>中间。这种模式又称为内部样式表，详情看上篇文件介绍。

 div{border:1px dashed rgb(245, 240, 240);width:500px;margin-bottom:10px;position: relative;left: 400px;}

3例子部分讲解：

main_border是我们自己定义的一个id。在这边我们用到一个新的知识点就是 #+id{ 样式设置 }中间的样式设置根据自己需要进行调配。

    #main_border{background-color: white;width: 100px;height: 250px;float: left;opacity: 0.7;}

4完整代码：

现在将整体架构搭建起来，设置网页标题（根据自己喜好设置），然后先将每块区域内容进行编辑，最后再进行模块位置的调整与优化。下面为搭建好的完整页面。样式也是采用内联式无需再新建文件。（当代码过多时还是建议用外链式。）这边先简单的演示一下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小米官网</title><style type="text/css">div{border:1px dashed rgb(245, 240, 240);width:500px;margin-bottom:10px;position: relative;left: 400px;}#menu{ /* 前边加#号就是用来id来选择这个标签 */background-color: rgb(30, 112, 184);height: 50px;width: 500px;opacity: 0.7;}#side_bar{background-color: palevioletred;height: 250px;width: 100px;float: left;/*从左往右浮动排列*/}#content_box{background-color:powderblue ;height: 250px;width: 300px;float: left;/*从左往右浮动排列*/}#main_border{background-color: white;width: 100px;height: 250px;float: left;opacity: 0.7;}#footer{background-color: rgb(122, 122, 234);  height: 50px;width: 500px;clear: both; /*不按浮动列排*/opacity: 0.7;}</style>
</head>
<body background="C:\Users\1\Pictures\Saved Pictures\2.webp"><div id="menu"><p>首页</p><p>电视</p></div><div id="side_bar"><ul><li>手机</li><li>电视</li><li>小家电</li><li>IOT</li></ul><br/><img src="C:\Users\1\Pictures\Saved Pictures\aa.jpg" width="70"></div><div id="content_box"><h2>大广告</h2><img src="C:\Users\1\Pictures\Saved Pictures\11.jpg" width=20%></div><div id="main_border"><h4>五彩大铁猿个人界面</h4><ol><li> 数据分析</li><li>物联网云平台设计</li><li>python</li></ol><a href="https://blog.csdn.net/weixin_47314602?type=blog" target="_blank">点这里跳转主页面</a></div><div id="footer"><h3>footer...</h3></div>
</body>
</html>

由于做的是简易版，没啥广告可放的，就放了一个动态图片上去。模块整体也是比较简易，还需后期的学习完善。

代码运行结果图：

如果觉得有用点个关注加收藏吧，以防后期找不到啦。

div网页布局（做一个简单网页界面为例）相关推荐

做一个简单网页(做一个简单网页多少钱)
怎样做一个简易的网页?做一个简单网页多少钱做一个简易的普通网页比较容易.当然,制作的方法有好几种,有的是直接写代码.有的是用绘图软件绘制页面再导出网页.常用的是使用网页制作软件做网页.下面以普通静态 ...
Java怎么做一个简单网页呢？
学java的同学在接触到Java web开发之后都跃跃欲试想要尝试自己开发一个页面,那么应该如何操作呢?都需要使用到哪些技术呢?下面小千就来告诉你. 需要使用到的技术 java 语言知识, jsp 知 ...
html与css编程证书,利用CSS布局做一个简单的荣誉证书（代码示例）
本篇文章将给大家介绍如何使用css布局制作一个简单的荣誉证书,有趣且实用,希望对需要的朋友有所帮助! 那么利用css布局实现简单荣誉证书样式的效果是非常简单的,主要用到以下几个基础属性: backgr ...
java如何做网页_java怎么做一个简单网页？网页包括什么？
学了java程序之后,大家就可以将这些运用到生活中去,比如做一个简单的网页.正好也可以检测自己学了怎么样,那么接下来,我们就来给大家讲解一下这方面的内容. 用Java语言编写实现一个简单的WEB浏览器 ...
用html5做一个简单网页_用新款ws2812灯带做一个简单的窗花
本文转自:DF创客社区-未经许可不可转载原文链接(附件请于原文下方下载): 用新款ws2812灯带做一个简单的窗花-创意生活论坛-DF创客社区mc.dfrobot.com.cn 作者:屌丝王小明 ...
web开发-前端作业-做一个简单网页
一.设计思路与主题设计思路:一直在跟pink老师学前端,有次表单练习是关于相亲网站的,于是突发奇想,打算把这个东西完善一下,再玩个谐音梗"珍禽网"--真情网~(顺便交个作业)主要 ...
用html5做一个简单网页_用Python做一个简单的翻译工具
编程本身是跟年龄无关的一件事,不论你现在是十四五岁,还是四五十岁,如果你热爱它,并且愿意持续投入其中,必定会有所收获. 本文就来自编程教室一位"小"读者的投稿(互助学习1群里的同学 ...
教你用Vue做一个简单网页计算器
二.案例描述 1. 考核知识点 2. 创建vue实例和对v-model内置指令的使用 3. 练习目标创建vue实例. 掌握v-model内置指令的使用. 4. 需求分析用户通过选择计算方法和数据输 ...
如何做一个简单的网页版地图
前言以前做了一个安卓版的地图应用,现在突然想做一个简单的网页版地图.这个简单的网页版地图能根据城市名进行位置查询(有个城市列表的小控件,支持城市列表选择),还能根据经纬度进行位置查询.当你进行城市搜 ...
用HTML+CSS做一个简单好看的环保网页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 环境保护 | 保护地球 | 校园环保 | 垃圾分类 | 绿色家 ...

div网页布局（做一个简单网页界面为例）

2例子部分讲解：

3例子部分讲解：

4完整代码：

div网页布局（做一个简单网页界面为例）相关推荐

最新文章

热门文章