博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
案例练习
阅读量:6906 次
发布时间:2019-06-27

本文共 821 字,大约阅读时间需要 2 分钟。

1、根据ucd来还原页面

  步骤:  1、准备相关文件  html css  images  js

··  ·  2、准备css初始化,书写结构和样式

     3、根据ucd确定版心宽度和各个模块

      记住:先不看细节,然后从上往下看布局

      一般:  第一行   header,nav (导航栏约定一般用  ul li  a  来做)

           第二行   banner

           第三行。。。

           最后一行  footer

      注意:结构要按照内容相关性划分

 

 笔记:

a、行高会继承

b、行内块与行内块中间会有个小缝隙---解决方式是要一起浮动

c、不能插入图片的可以用背景图--小精灵

d、margin: 0  auto;   (盒子设置宽度的前提下,让盒子水平居中)

e、选中元素的选择器一般不超过3个

f、若子元素全部浮动后,除非父元素给了固定高度,不然就要清除浮动的影响。

g、li里面的a的常用方式

h、dl>dt+dd可用来布局

  ul>li  可用来布局

I、让中文文字之间有点间隔 

  letter-spacing:2px

 j、盒子设置好宽高后再设置padding border时会撑开盒子

如果不想计算的话可以用   box-sizing:border-box;

    -----  理解好盒模型!

     例 子 :一个div设置width:100%  ---和body一样宽,然后设置padding:2px  此时div被撑大,页面出现滚动条   

      一个div设置不设置,然后设置padding:2px 此时div被撑大 页面不会出现滚动条   

   备注: 块级元素不设置宽度时宽度默认是父元素宽度的100%,浮动之后宽度是内容大小。

   备注: 行内、行内块宽度默认是内容大小。

 

转载于:https://www.cnblogs.com/yangyutian/p/10618504.html

你可能感兴趣的文章
iOS App 的逆向
查看>>
Spring如何扫描class和配置文件
查看>>
Java压缩技术(一) ZLib
查看>>
【VMware虚拟化解决方案】VMware Horizon View Client 各平台配置文档
查看>>
java线程池
查看>>
Linux内核线程
查看>>
Linux cp时总询问是否覆盖,怎样让它不询问直接覆盖
查看>>
笨方法学python Lesson 45
查看>>
Java HashMap的实现原理
查看>>
服务器的发送数据
查看>>
kvm install 报错could not open disk imageXXX: Permission denied
查看>>
lduan office 365 自定义域的添加和配置二
查看>>
在Wordpress侧栏中使用下拉菜单显示分类
查看>>
基础排序算法 – 选择排序Selection sort
查看>>
Appium移动自动化测试环境部署
查看>>
corosync+pacemaker+crm实现drbd高可用
查看>>
Git Fork和PullRequest
查看>>
springBoot2.x设置quartz的overwriteExistingJobs参数
查看>>
VMware中通过克隆的Centos7,网卡突然没了
查看>>
学习笔记 DNS 子域授权 view
查看>>