项目实践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.内联--& ...
随机推荐
- SAP Web Dynpro-版本管理
您可以使用版本管理来管理对象的旧版本,比较版本,也可以重置它们. 在版本管理中,您可以存储ABAP开发对象的不同版本. 在ABAP工作台中,您可以比较不同版本的- 视图 视窗 控制器 您也可以存储对象 ...
- 一文精通HashMap灵魂七问，你学还是不学
如果让你看一篇文章,就可以精通HashMap,成为硬刚才面试官的高手,你学还是不学? 别着急,开始之前不如先尝试回来下面几个问题吧: HashMap的底层结构是什么? 什么时候HashMap中的链表会 ...
- 基于swiftadmin极速后台开发框架，我制作了菜鸟教程[专业版]
由于互联网上基础编程教学的文档和视频教程已经有很多了,为什么还要建立菜鸟教程网, 这是因为基于我个人在十余年的自学编程的道路上.,我能深刻的体会到一名新手 在入门编程的时候,门槛在哪里,痛点在哪里?很 ...
- 无语——真的好用到不行的7个Python小技巧
本文总结了我几个我在学习python过程中,用到的几个超好用的操作,这里分享给大家,我相信你们也会非常喜欢,目录如下.这里提前索要再看,记得点一点再看哦.这只是其中一些技巧,以后会慢慢和大家分享. 1 ...
- Codeforces Round #792 (Div. 1 + Div. 2) A-E
Codeforces Round #792 (Div. 1 + Div. 2) A-E A 题目 https://codeforces.com/contest/1684/problem/A 题解 思路 ...
- UI自动化测试执行问题总结
------------恢复内容开始------------  的系统. 使用Cartographer有Ros集成环境和无Ros环境,对于新手快速入门,推 ...
- 【docker专栏6】详解docker容器状态转换管理命令
docker容器有三种状态运行.停止.暂停,镜像可以创建.运行容器,镜像和容器也可以转换成tar压缩包进行存储.本文为大家介绍容器的状态转换命令及镜像创建运行容器.tar包导入导出相关的命令及使用场景 ...
- idea 内置tomcat jersey 跨服务器 上传文件报400错误
报错内容 com.sun.jersey.api.client.UniformInterfaceException: PUT http://.jpg returned a response status ...
- SQL练习六--More JOIN operations
movie Field name Type Notes id INTEGER An arbitrary unique identifier title CHAR(70) The name of the ...