CSS开发-简单布局模板

实现图如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简单布局</title><style>body{background-color: #f4f4f4;}.header{width:1920px;height:171px;background-color: #fff;margin:0 auto;}main{width:1190px;height:470px;margin:10px auto 30px;background-color: #f5f5f5;}footer{width:1190px;height:260px;margin:0px auto;background-color: red;}.header-top{width:100%;height:31px;background-color: #e3e4e5;}.header-content{width: 100%;height: 140px;background-color: #ffffff;}nav,article,aside,.article-image,.article-discount{height: 100%;float:left;}nav{width: 190px;background-color: #fefefe;}article{width: 790px;background-color: #f5f5f5;margin:0px 10px;}aside{width:190px;background-color:#ffffff;}article>div.article-image{width:590px;background-color:yellow;}article>div.article-discount{width:190px;background-color: #f6f6f6;margin-left:10px;}article div.article-discount-01{width: 100%;height:150px;background-color:#cedbdd;}article div.article-discount-02{width: 100%;height: 150px;background-color: #ceddd5;margin:10px 0px;}article div.article-discount-03{width:100%;height:150px;background-color:#d7d9e4;}</style>
</head>
<body><!-- 网页头部 --><div class="header"><div class="header-top"></div><div class="header-content"></div></div><!-- 网页主体 --><main><!-- <div class="div-nav"></div><div class="div-"></div><div class="div-"></div><div class="div-"></div> --><!-- 左导航 --><nav></nav><!-- 主体 --><article><div class="article-image"></div><div class="article-discount"><div class="article-discount-01"></div><div class="article-discount-02"></div><div class="article-discount-03"></div></div></article><!-- 右边栏 --><aside></aside></main><!-- 网页底部 --><footer></footer>
</body>
</html>

CSS开发-简单布局模板相关推荐

php css布局技巧,最全的CSS开发常用技巧
css(层叠样式表)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各 ...
polished css,CSS3网格布局（grid）模板在线构建工具
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 const {render} = ReactDOM; const {Component, PropTypes ...
提高css开发效率的代码片段模板
提高css开发效率的代码片段这篇文章会记录我们平时常用到的 CSS 片段,使用这些 CSS 可以帮助我们解决许多实际项目中遇到的问题清除浮动浮动给我们的代码带来的麻烦,想必不需要多说,我们会用很 ...
网站开发之DIV+CSS简单布局网站入门篇（五）
这篇文章主要介绍如何使用DIV和CSS简单布局一个网站的首页,通常将网站划分为顶部(Logo.导航条).中部(页面主要内容.左右栏目).底部(制作方介绍.超链接).这是非常基础的一篇引入性文章,采用案 ...
实验一基于CSS+HTML+JS开发简单个人网站
目录: 实验要求实验代码 1.注册 2.登录 3.主页 4.个人简介 5.我的理想 6.我的生活 7.学习内容总结实验要求实验一基于CSS+HTML+JS开发简单个人网站实验学时:4 ...
前端学习——css盒子模型简单布局
<html><head><title>盒子模型简单布局</title><meta charset="UTF-8"/>&l ...
CSS Grid网格布局全攻略
CSS Grid网格布局全攻略所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...
翻译 | CSS网格（CSS Grid）布局入门
原文地址:Getting to know CSS Grid Layout 原文作者:Chris Wright 译者:华翔校对者:珂珂.干干翻译 | CSS网格(CSS Grid)布局入门 bann ...
Django 3.2.5博客开发教程:实现模板之前的分析与准备
在之前的体验django模板.体验数据查询以及一些常用的模板使用方法文章里,向大家介绍了如何将数据库的数据展现到网页上,和一些简单的模板使用方法.之后我们就开始实现各种页面的展现. 在此之前,我们先从 ...

CSS开发-简单布局模板

CSS开发-简单布局模板相关推荐

最新文章

热门文章