CSS基础(二)--盒模型与浮动练习

最新推荐文章于 2022-05-23 23:02:14 发布
最新推荐文章于 2022-05-23 23:02:14 发布
阅读量262 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013658374/article/details/78128782
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            width: 970px;
            height: 103px;
            /*居中，这个语句今天没讲，你照抄，就是居中：*/
            margin: 0 auto;
        }
        .header .logo{
            float: left;
            width: 277px;
            height: 103px;
            background-color: red;
        }
        .header .language{
            float: right;
            width: 137px;
            height: 49px;
            background-color: green;
            margin-bottom: 8px;
        }
        .header .nav{
            float: right;
            width: 679px;
            height: 46px;
            background-color: green;
        }

        .content{
            width: 970px;
            height: 435px;
            /*居中，这个语句今天没讲，你照抄，就是居中：*/
            margin: 0 auto;
            margin-top: 10px;
        }
        .content .banner{
            float: left;
            width: 310px;
            height: 435px;
            background-color: gold;
            margin-right: 10px;
        }
        .content .rightPart{
            float: left;
            width: 650px;
            height: 435px;
        }
        .content .rightPart .main{
            width: 650px;
            height: 400px;
            margin-bottom: 10px;
        }
        .content .rightPart .links{
            width: 650px;
            height: 25px;
            background-color: blue;
        }
        .content .rightPart .main .news{
            float: left;
            width: 450px;
            height: 400px;
        }
        .content .rightPart .main .hotpic{
            float: left;
            width: 190px;
            height: 400px;
            background-color: purple;
            margin-left: 10px;
        }
        .content .rightPart .main .news .news1{
            width: 450px;
            height: 240px;
            background-color: skyblue;
            margin-bottom: 10px;
        }
        .content .rightPart .main .news .news2{
            width: 450px;
            height: 110px;
            background-color: skyblue;
            margin-bottom: 10px;
        }
        .content .rightPart .main .news .news3{
            width: 450px;
            height: 30px;
            background-color: skyblue;
        }
        .footer{
            width: 970px;
            height: 35px;
            background-color: navy;
            /*没学，就是居中：*/
            margin: 0 auto;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <div class="logo">logo</div>
        <div class="language">语言选择</div>
        <div class="nav">导航条</div>
    </div>

    <!-- 主要内容 -->
    <div class="content">
        <div class="banner">大广告</div>
        <div class="rightPart">
            <div class="main">
                <div class="news">
                    <div class="news1"></div>
                    <div class="news2"></div>
                    <div class="news3"></div>
                </div>
                <div class="hotpic"></div>
            </div>
            <div class="links"></div>
        </div>
    </div>

    <!-- 页尾 -->
    <div class="footer"></div>
</body>
</html>
伊莉丝
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS--盒子模型小练习示例代码
qq_43766304的博客
03-06 2205
完成下面的盒子 示例代码如下： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
css，盒模型简单练习
shiyu18的博客
11-02 2283
盒模型练习 css盒模型练习 继续熟练练习css，并且更清楚认识到css的好处 完成以下布局： 要求：熟练使用border(边框)，padding(内边距)，margin(外边距) 分析：上图中第一张图需要单独写样式，后面四张图仅需要一个样式即可，并且个块都有上边框(border),外间距间距一样 代码实现： html部分： <!doctype html> <html> <head> <meta charset="utf-8"> <title
CSS-结构浮动及盒模型简单练习
弱小无助但胖胖
01-19 471
在上一篇博客中，我简单介绍了一下浮动和清除浮动的使用，这次以一张网页设计图（图片来源于网络）为模板来练习一下。 当然作为新手，我们要从简单的开始，以覆盖色块（使用Photoshop添加纯色图层）的形式，我将这张设计图做成了一张色块图。 开始之前，我们需要先测量一些即将使用到的数据，这里推荐使用PxCook（像素大厨），一个高效易用的自动标注工具。工具栏中的距离标注、区域标注及颜色标注等可以帮助我们...
CSS练习三(盒子练习)
屈帅波的技术博客
05-23 1685
练习题1 <!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
盒模型的小练习
weixin_44549398的博客
04-28 287
这是我做的一个盒模型的一个小案例，我就简单的说一下吧。 首先在源代码里面，几个div在给他一个类，每一个div里面不能写重复的类名，写好之后在到css那里写一些样式。 我先截图上部分的来说明，上面那个大的正方形背景给他宽度高度在设置他的背景颜色为橘色，然后在设置他垂直居中就到了中间的这个地方，第二个的虚线是设置他的宽度和高度，然后在设置他的边框属性，之后在移动他的位置上下为-530，左右为a...
十个静态页面展示-练习 HTML-CSS
12-12
在本实践项目中，"十个静态页面展示-练习 HTML-CSS" 是一个为初学者设计的教程，旨在帮助那些刚刚接触前端开发或者对前端技术感兴趣的朋友们掌握基础的 HTML 和 CSS 技能。这个压缩包文件包含了 01-HTML-CSS 这个子...
头歌教学实践平台 Web前端开发基础 CSS-基础知识
01-20
此外，CSS还支持盒模型，这是理解元素尺寸和布局的关键。盒模型包括内容区域、内边距（padding）、边框（border）和外边距（margin）。通过调整这些部分，我们可以精确控制元素的大小和位置。 在CSS中，我们还可以...
painless-css:无痛CSS
05-01
学习者将从基础开始，了解选择器、属性和值的概念，如何将样式应用到HTML元素上，以及盒模型的理解，这些都是构建任何网站样式的基础。 2. **选择器的使用**：CSS选择器是定位HTML元素的关键。包括类选择器、ID选择...
CSS教程:通过实例学习和理解CSS盒模型
12-10
CSS盒模型是网页设计中一个基础且至关重要的概念，它定义了网页元素如何在页面上占据空间并与其他元素相互作用。盒模型主要包括四个部分：内容（Content）、内边距（Padding）、边框（Border）和外边距（Margin）。 ...
css-box-model-challenge
03-06
其中，CSS盒子模型是理解CSS布局的基础，对于任何前端开发者来说都是必须掌握的知识点。"css-box-model-challenge"显然是一个旨在帮助学习者深化理解并实践CSS盒子模型的练习项目。 CSS盒子模型，也称为Box Model，...
html盒模型向上浮动,HTML 学习笔记 May 8，2017 盒子模型3练习、浮动、清楚浮动、css定位详解、仿搜... - 简书...
weixin_42303282的博客
06-03 606
HTML 学习笔记 May 8，2017 盒子模型3练习、浮动、清楚浮动、css定位详解、仿搜狐网站首页面布局、js基本介绍控制显示区域的高度和宽度div 控制显示的位置float: left; /左浮动/定义边框：p {border-style: solid; /* 实线 */}border-style: dotted solid double dashed;/* 上边框是点状 // 右边框是实...
前端面试题之CSS盒模型
热门推荐
simeng-han的博客
11-10 1万+
前端面试对于CSS这块不可或缺的一个考察点就是盒模型（BOX），通过对BOX的提问就可以了解你在CSS知识方面的掌握程度。本文主要介绍CSS中的盒模型在面试中可能会问到的相关问题和知识点，不足指出请指出改正。 首先，最基础的问题–什么是盒模型？ 可以说，页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（pa...
CSS学习中|CSS盒子模型（重点学习！代码+样例）
weixin_47788265的博客
07-15 3486
1.盒子模型（Box Model） 理解盒子模型： 可以把html页面中的布局元素看作一个矩形的盒子，她就是一个盛装内容的容器 如图，把content（内容）想象成一个网购的新手机，有宽（width）和高（height） 手机距包装盒的距离为内边距（padding） 包装盒本身的宽度为边框（border） ...
前端开发--css--盒子模型练习题
sundanping_123的博客
07-04 2832
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <title>盒子模型</title> <style type="text/css"> .news_title{ width: 380px; height: 35p...
练习 | CSS盒子模型
虎鲸虎鲸
01-31 2190
文章目录题1:如何不让外边距合并题2:行内显示多个元素题3:元素水平居中题4:元素水平垂直同时居中题5:边角按钮 题1:如何不让外边距合并 请用盒子模型的边框实现下面版面(如何不让外边距合并） 解 这里采用的是 padding 和 margin 一起使用的方法 找到了一篇写了很多解法的文章 （码） index.html <!DOCTYPE html> <html lang...
TerAd - 基于stm32的各种数字接口的终端适配器
08-08
TerAd - 基于stm32的各种数字接口的终端适配器
Chrontel_Update_Tool_CH7219A_V03.02.04.rar
最新发布
08-08
Chrontel_Update_Tool_CH7219A_V03.02.04.rar
暑期培训7_2.ipynb
08-08
暑期培训7_2.ipynb
Linuxstm-forecast-笔记
08-08
Linuxstm-forecast-笔记
CSS盒模型详解：基础教学与关键应用
本篇文章主要介绍了CSS盒模型的基础知识及其在网页设计中的应用。CSS盒模型是网页布局设计的核心概念，它将HTML元素视为一个包含内容、边框、内边距和外边距的矩形框。理解并掌握这个模型对于创建响应式和可维护的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值