网页布局小练习

最新推荐文章于 2024-03-13 14:04:42 发布
最新推荐文章于 2024-03-13 14:04:42 发布
阅读量694 收藏 1
点赞数
文章标签： 网页布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43693216/article/details/84966678
版权 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .tb{
            width: 970px;
            height: 590px;
        }
        *{
            margin: 0 auto;
            padding: 0px;
        }
        .oiv1{
            width: 970px;
            height: 103px;
        }
        .oiv2{
            margin-top: 10px;
        }
        .oiv3{
            width: 310px;
            height: 435px;
            background-color: darkorange;
            float: left;
        }
        .qw{
            float: right;
            margin-left: 10px;
        }
        .oiv4{
            width: 190px;
            height: 400px;
            float: right;
            background-color: violet;
        }
        .ovi5{
            width: 450px;
            height: 400px;
            float: left;

        }
        .oiv6{
            width: 650px;
            height: 25px;
            background-color: forestgreen;
            margin-top: 410px;
        }
        .oiv7{
            height: 35px;
            margin-top: 455px;
            background-color: #380cb0;
        }
        .box1{
            width: 277px;
            height: 103px;
            background-color: red;
            float: left;
        }
        .box2{
            float: right;
        }
        .box3{
            height: 240px;
            background-color: cornflowerblue;
        }
        .box4{
            height: 110px;
            margin-top: 10px;
            background-color: cornflowerblue;
        }
        .box5{
            height: 30px;
            margin-top: 10px;
            background-color: cornflowerblue;
        }
        .z1{
            width: 137px;
            height: 49px;
            background-color: chartreuse;
            margin-right: 0px;
            margin-bottom: 8px;
        }
        .z2{
            width: 679px;
            height: 46px;
            background-color: chartreuse;
        }
    </style>
</head>
<body>
<div class="tb">
<div class="oiv1">
    <div class="box1"></div>
    <div class="box2">
        <div class="z1"></div>
        <div class="z2"></div>
    </div>
</div>
<div class="oiv2">
    <div class="oiv3"></div>
    <div class="qw">
    <div class="oiv4"></div>
    <div class="ovi5">
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
    </div>
    <div class="oiv6"></div>
    </div>
</div>
<div class="oiv7"></div>
</div>![顶顶顶顶](h111ttps://img-blog.csdnimg.cn/20190226153822552.png?x-oss-111process=image/watermark,type_ZmFuZ3poZW511naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MzIxNg==,size_16,color_FFFFFF,t_70)
</body>
</html>!
远山精灵
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浮动布局练习
407指导员
11-11 358
浮动布局练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动练习一</title> <style> body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, i
基础网页布局到设计练习1
flying_whale1的博客
09-22 456
文章目录前言练习内容实现步骤小结 前言 由于选修了Bootstrap前端课程，就又开始了前端之旅，和之前的老师不同，这门课的老师讲授方式和技术水平都很不错，也算是学会了一些基础的网页设计理念，在此记录。 练习内容 模仿实现下面的网页效果图 实现步骤 建立整体框架 稍微细心留意下，可发现该页面可大致分为4部分：页头、导航栏、文章内容、页尾，如下示意图。 进一步细化整体框架的内部框架，如下图所示。 填充框架内容，注意父子元素之间的宽度和高度的传递，实现得到下图。 小结 虽然之前也有过类似做法设计网页，但
Flex布局案例练习（二）- 自适应布局
JHY97的博客
01-25 1562
Flex布局简单案例练习 一、自适应布局 不同的设备用不同的页面或局部伸缩 设计思路：判断设备的类型或控制局部的变化
前端面试题：(HTML&CSS）网页布局
illion booked
05-26 278
1、CSS中居中方式
html+css基础案例（浮动的应用）北京大学网页布局css练习
weixin_41306215的博客
03-20 1486
一、浮动的定义 浮动：float 作用：让我们的元素在某一个方向在一行并排排列 浮动的特殊效果：元素脱离标准流，既可以设置宽高，又可以一行排列。 属性值：left，right 左浮动： float：left； 会依次去贴父元素的左边 浮动是不可以继承的 正在上传…重新上传取消正在上传…重新上传取消 右浮动：float：right； 依次去贴父元素的右边，序号从右到左 ...
网页布局练习.zip
最新发布
04-16
"网页布局练习.zip"这个文件很可能是包含了一系列关于网页布局的学习资料或者实例代码，旨在帮助学习者掌握各种网页布局技巧。在网页设计中，布局不仅关乎美学，更直接影响到用户体验。以下是一些关于网页布局的主要...
网站布局练习div模板
04-02
在本“网站布局练习div模板”中，我们将深入探讨使用HTML中的`<div>`元素以及CSS来创建灵活、响应式的网页布局。 `<div>`是HTML文档中的一个块级元素，用于组合其他HTML元素，为它们提供样式或行为。在网页布局中，...
图文页面、图文布局的练习
08-04
同时，这也将帮助你应对各种复杂的网页布局挑战，例如响应式设计，使得页面在不同设备上都能良好显示。 在完成这些练习时，建议你遵循以下步骤： 1. 设计整体页面布局，考虑背景色和内容区域。 2. 使用HTML创建基本...
css布局实战之单页练习
04-02
在CSS布局领域，单页（Single Page Application, SPA）练习是一项重要的技能，它涉及到网页设计、用户体验和前端性能优化等多个方面。在这个主题中，我们将深入探讨CSS如何在单页应用中构建高效、响应式的布局。 ...
粉色div布局练习模板
04-02
在这个“粉色div布局练习模板”中，我们可以深入探讨如何利用`div`来创建一个美观、功能完善的单页网站，尤其关注其粉色主题的应用。 首先，让我们了解一下`div`（Division）元素。在HTML中，`<div>`是一个无语义的...
Web入门初学者纯静态页面练习 HTML+CSS 布局、浮动练习
11-23
一个纯静态HTML+CSS单页面练习,牵扯布局、浮动练习。
今日份实操——（HTML+CSS）浮动布局练习
zx2014567296的博客
05-27 1267
效果图如下所示。 分析过程： 总共分为heder、nav、aside、content、footer5个区域。 header区域：由背景图片和蓝色背景颜色构成； nav区域：由5个超链接构成，每个超链接要设置渐变背景，当鼠标划过时更改渐变背景的显示效果。 aside区域：宽度取和nav超链接同宽，背景颜色为蓝色。 content区域：位于aside区域右侧。 footer区域：背景颜色为淡蓝色。 代码环节： ...
html+css网页练习四
qq_52108058的博客
02-07 4169
阅读下列说明、效果图，完成静态页面。 某购物网站首页页面局部效果。当鼠标悬停到导航文字上时，背景色会变为红色。现在我们需要编写该网站效果图部分代码。 项目包含首页index.html、img文件夹和css文件夹，页面效果如图所示。 4、style.css 二、活动页面 1、要求 阅读下列说明、效果图和HTML代码，进行静态网页开发，主要应用HTML和css3完成。 这个某项目中的其中一个活动页，应用HTML5和css3技术完成页面动画。鼠标没经过是图1，当鼠标经过是图2，当鼠标经过遮罩层像翻书一样显示出来
HTML5-网页布局练习
weixin_68047790的博客
10-31 324
HTML5-网页布局练习。
网页布局综合练习
Lucivita的博客
01-21 896
目录 1.练习：分别用两种模型按图中标注的参数设置以下两个元素。 盒子一： ​ 盒子二： 2.综合练习 一.HTML代码 二.CSS代码 三.效果图 1.练习：分别用两种模型按图中标注的参数设置以下两个元素。 分析：ie盒子和标准盒子的区别在于ie盒子的height和width包括border和padding 盒子一： html代码 <body> <div class="one">标准盒子</div> <di...
响应式布局练习页面
FuHangg的博客
03-13 354
【代码】响应式布局练习页面。
【web前端开发】HTML及CSS简单页面布局练习
Liu_y_xin的博客
02-09 1389
视频播放v.play();.cont{播放/暂停</button><button onclick="big()">放大</button><button onclick="small()">缩小
2022-03-03 html网页布局练习(二):使用float浮动+html5新增标签进行网页布局
GAARA
03-03 412
页面由头部header+轮拨图banner+选项卡片section+案例case+客户client+关于我们&新闻aboutUs&news+底部footer组成 头部底部等等用到了h5新增标签 使用float浮动进行盒模型的水平布局,使用内外边距padding和margin进行上下左右间距的拉开 在margin:top塌陷的地方是通过改为设置padding:top再将height减去相应像素来实现的 网页在浏览器中的居中显示是通过设置html的宽度100%,body设置一个固定宽度然后margin:0 au
百度前端技术实战训练营——Web布局（上）
qq_62215764的博客
01-12 709
CSS布局指通过CSS去拾取网页中的元素，并且控制它们相对普通文档流、周边元素、父容器甚至浏览器窗口的位置，覆盖默认的布局行为。\newline合理布局的作用：网站通常分为页眉、菜单、内容和页脚。
css移动端布局练习
09-16
CSS移动端布局练习是用于设计和开发适应移动设备的网页的练习。移动设备的屏幕尺寸较小，需要针对不同尺寸的设备进行响应式布局，以保证页面在不同设备上的显示效果和用户体验。 在进行CSS移动端布局练习时，需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值