为了账号安全,请及时绑定邮箱和手机立即绑定

网页简单布局之结构与表现原则

江老实 Web前端工程师
难度初级
时长22分
学习人数
综合评分9.67
1416人评价 查看评价
9.8 内容实用
9.7 简洁易懂
9.5 逻辑清晰
  • 三种思路:

    1,设置2个盒子,分别是leftBox,rightBox,左右浮动

    2,去掉左盒子 leftBox,直接加载一个img图片,图片设置左浮动,也能撑开左侧。

    3,去掉全部div盒子,只保留结构,达到最精简目的。

    使用{margin-left:-100px;float:left;}强行把图片左移动出来。

    使用div{margin-right:100px}

    查看全部
  • <!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">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>图片背景</title>

    <style type="text/css">

    body{ margin:0;}

    div{background:#460E29;width:700px;padding:20px}

    img{margin-left:10px; background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg); padding:1px 20px 30px 20px;}

    </style>

    </head>

    <body>

    <div><img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" /><img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" /><img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" /><img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" /> </div>

    </body>

    </html>


    查看全部
    0 采集 收起 来源:编程挑战

    2018-07-18

  • html:结构

    css:表现

    javascript:行为

    查看全部
    0 采集 收起 来源:内容简介

    2018-07-16

  • 网页换肤,一个网页一个结构多种CSS样式,结构与表现分离

    查看全部
  • 结构与表现分离

    查看全部
    0 采集 收起 来源:排行榜制作

    2018-06-29

  • text-indent : 文本/文字缩进,允许使用负值

    查看全部
  • 网页简单布局


    https://img1.sycdn.imooc.com//5b35abca0001ae5110430536.jpg

    查看全部
    0 采集 收起 来源:内容简介

    2018-06-29

  • 再复杂的界面也是由这些小模块组成的

    查看全部
  • 先按结构和语义编写代码

    然后进行CSS样式设置

    减少HTML与CSS契合度

    查看全部
  • 网页制作中 结构、表现、行为分离,其中 HTML 是结构,CSS是表现,javascript是行为

    查看全部
    0 采集 收起 来源:练习题

    2018-06-08

  • text-indent : 文本缩进

    查看全部
  • 编写HTML代码:

    1. 先按结构和语义编写代码

    2. 然后进行CSS样式设置

    3. 减少HTM和CSS契合度

    查看全部
  • text-indent:585px;/*文本缩减*/

    查看全部
  • 当父元素的高度是靠子元素撑开的时候,子元素浮动时,则在父元素使用overflow: hidden可以清除浮动,使得父元素的高度依旧是靠子元素撑开。

    当父元素自身设置了height属性值,则在父元素使用overflow: hidden可以使子元素超出父元素的那部分隐藏。


    查看全部
  • 网页中的每个元素都可以看作一个盒子,盒子有外边距(margin)、边框(border)、内边距(padding)、内容(content)这4个属性,所以它的宽高也是由这四个属性的宽高构成的。

    查看全部
    0 采集 收起 来源:编程挑战

    2018-05-20

举报

0/150
提交
取消
课程须知
1.html+css简单的基础知识 2.有网页制作实战经验
老师告诉你能学到什么?
1.根据效果图能正确分解结构和表现 2. 能够深入理解网页结构与表现分离的思想

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!