好家伙,

整个网页做下来,最主要的,自然是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网页布局(常用)的更多相关文章

  1. DIV+CSS网页布局常用的一些基础知识

    CSS命名规范 一．文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: 二．常用类/I ...

  2. DIV+CSS网页布局常用的一些基础知识整理

    CSS命名规范 一．文件命名规范 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print.css: 二．常 ...

  3. CSS网页布局中易犯的30个小错误

    即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...

  4. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

  5. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  6. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  7. CSS网页布局错位:CSS宽度计算

    为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...

  8. 前端学习笔记之CSS网页布局

    CSS网页布局   阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...

  9. 《精通CSS网页布局》读书报告 ----2016-12-5补充

    第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦!  (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...

随机推荐

  1. 【Github】 Github修改仓库的基本信息

    前言 我们通常在刚开始了解学习使用github时,一般都是测试的使用,有时我们向里面添加了一些代买,如果想要修改信息并且是删除仓库重新创建提交,可以采用下面方法修改仓库信息,名称.描述等. 修改仓库描 ...

  2. 引入gitlab仓库代码到npm包的教程

    背景介绍 随着人类地发展,社会地进步,计算机技术地更新迭代,每一片码海里都有它宝贵的财富,每一座码山里都有着各自的秘密.怎么守住财富,隐藏一些秘密,成了一些开发人员所关心的事情. 需求分析 简单地说, ...

  3. Kali MSF漏洞利用

    一.前言 漏洞利用是获得系统控制权限的重要途经.用户从目标系统中找到容易攻击的漏洞,然后利用该漏洞获取权限,从而实现对目标系统的控制. 二.Metasploitable Metasploitable是 ...

  4. Nginx防御CC攻击

    CC攻击可以归为DDoS攻击的一种.他们之间都原理都是一样的,即发送大量的请求数据来导致服务器拒绝服务,是一种连接攻击.CC攻击又可分为代理CC攻击,和肉鸡CC攻击.代理CC攻击是黑客借助代理服务器生 ...

  5. NC14661 简单的数据结构

    NC14661 简单的数据结构 题目 题目描述 栗酱有一天在网上冲浪的时候发现了一道很有意思的数据结构题. 该数据结构形如长条形. 一开始该容器为空,有以下七种操作. 1 a从前面插入元素a 2 从前 ...

  6. 聊聊 C++ 大一统的初始化运算符 {}

    一:背景 最近发现 C++ 中的类型初始化操作,没有 {} 运算符搞不定的,蛮有意思,今天我们就来逐一列一下各自的用法以及汇编展现,本来想分为 值类型 和 引用类型 两大块,但发现在 C++ 中没这种 ...

  7. SSH远程连接学校实验室服务器 一 python版本问题

    问题1: 连接上远程服务器后,输入 python 发现python版本只有2.7 .试图使用以下方式更新: sudo apt install python3.9 会出现如下报错信息: 解决方式: 一般 ...

  8. 各大厂的语音识别Speech To Text API使用体验

    最近发现有声读物能极大促进我的睡眠,但每个前面都有一段开场语,想把它剪掉,但是有多个开场语,所以就要用到语音识别判断一下再剪. 前两年在本地搭建过识别的环境,奈何识别准确率不行,只能找找API了,后面 ...

  9. Phabricator Conduit API介绍

    在Phabricator页面,可以完成创建和编辑Project.Task等操作.但是如果想实现外部系统可以自主操作Phabricator,那么就需要调用Phabricator Conduit API, ...

  10. 数据结构(C语言版)严蔚敏-＞排序

    @ 目录 1. 插入排序 1.1 直接插入排序 1.2 折半插入排序 1.3 希尔排序(Shell Sort) 2.交换排序 2.1 冒泡排序 2.2 快速排序 3. 选择排序 3.1 简单选择排序 ...