项目实践2:项目中的CSS网页布局(常用)
好家伙,
整个网页做下来,最主要的,自然是css的网页布局(菜鸟好用啊)
我需要一个大概这样的布局:
然后上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 网页布局 - 菜鸟教程(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
} body {
margin: 0;
} /* 头部样式 */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
} /* 导航条 */
.topnav {
overflow: hidden;
background-color: #333;
} /* 导航链接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
} /* 链接 - 修改颜色 */
.topnav a:hover {
background-color: #ddd;
color: black;
} /* 创建三个不相等的列 */
.column {
float: left;
padding: 10px;
} /* 左右两侧宽度 */
.column.side {
width: 25%;
} /* 中间区域宽度 */
.column.middle {
width: 50%;
} /* 列后面清除浮动 */
.row:after {
content: "";
display: table;
clear: both;
} /* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
</style>
</head>
<body> <div class="header">
<h1>头部区域</h1>
<p>重置浏览器大小查看效果。</p>
</div> <div class="topnav">
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#">链接</a>
</div> <div class="row">
<div class="column side">
<h2>左侧栏</h2>
<p>菜鸟教程 - 学的不仅是技术,更是梦想!</p>
</div> <div class="column middle">
<h2>主区域内容</h2>
<p>菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!</p>
<p>菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!</p>
</div> <div class="column side">
<h2>右侧栏</h2>
<p>菜鸟教程 - 学的不仅是技术,更是梦想!</p>
</div>
</div> </body>
</html>
这个模板就很好用
其效果图如下:
然而比较蠢的是: 这里用的话就一个一个个<div>的套着用:
就是将整个网页切成一块一块的,分配面积,然后再每一个块里填东西
大概就那个意思.
虽然看上去比较蠢,但可行并且完成了目标效果.
很好奇别人网页布局是怎么做的,明天去问问学长
项目实践2:项目中的CSS网页布局(常用)的更多相关文章
- DIV+CSS网页布局常用的一些基础知识
CSS命名规范 一.文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: 二.常用类/I ...
- DIV+CSS网页布局常用的一些基础知识整理
CSS命名规范 一.文件命名规范 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print.css: 二.常 ...
- CSS网页布局中易犯的30个小错误
即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...
- 简单实用的CSS网页布局中文排版技巧
由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- CSS网页布局全精通
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...
- CSS网页布局错位:CSS宽度计算
为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
- 前端学习笔记之CSS网页布局
CSS网页布局 阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...
- 《精通CSS网页布局》读书报告 ----2016-12-5补充
第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦! (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...
随机推荐
- 前端学习 linux —— 第一篇
前端学习 linux - 第一篇 本文主要介绍"linux 发行版本"."cpu 架构"."Linux 目录结构"."vi 和 v ...
- DBPack 赋能 python 微服务协调分布式事务
作者:朱晗 中国电子云 什么是分布式事务 事务处理几乎在每一个信息系统中都会涉及,它存在的意义是为了保证系统数据符合期望的,且相互关联的数据之间不会产生矛盾,即数据状态的一致性. 按照数据库的经典理论 ...
- Node.js精进(5)——HTTP
HTTP(HyperText Transfer Protocol)即超文本传输协议,是一种获取网络资源(例如图像.HTML文档)的应用层协议,它是互联网数据通信的基础,由请求和响应构成. 在 Node ...
- Educational Codeforces Round 129 (Rated for Div. 2) A-D
Educational Codeforces Round 129 (Rated for Div. 2) A-D A 题目 https://codeforces.com/contest/1681/pro ...
- Zabbix 5.0:通过LLD方式自动化监控阿里云RDS
Blog:博客园 个人 之前做了RDS监控,由于 RDS 实例梳理增多,手动添加的方式已经不够效率,故改为LLD(Low-level discovery)方式做监控. 什么是LLD LLD(Low-l ...
- 如何借助Chrome Tool Dev 帮助前端开发
11111111111111111111111111111111111111111111111111
- 如何用Fiddler对APP进行网络测试
什么是Fiddler Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的"进出"Fiddler的数据(指co ...
- Tapdata Cloud 2.1.4 来啦:数据连接又上新,PolarDB MySQL、轻流开始接入,可自动标记不支持的字段类型
需求持续更新,优化一刻不停--Tapdata Cloud 2.1.4 来啦! 最新发布的版本中,在新增数据连接之余,默认标记不支持同步的字段类型,避免因此影响任务的正常运行. 更新速览 ① 数 ...
- System类的常用方法和StringBuilder的原理
System类的常用方法1.currentTimeMillis方法2.arraycopy方法 java.lang.System 类中提供大量的静态方法,可以获取与系统相关的信息或系统级操作,在Syst ...
- Cisco Packet Tracer Student(思科网络模拟器)模拟搭建VLAN网络
一.VLAN简介 VLAN指在同一个物理网段内,通过逻辑手段,将其划分出多个虚拟的局域网,每个虚拟局域网都具备和真实局域网一样的功能.VLAN不受物理位置限制,可以灵活划分,同一个VLAN内的主机之间 ...