如何确定要对DIV设置什么CSS属性样式呢?
设置什么CSS样式不是凭空想象的而是有参考的,一般分三种情况下得到需要知道设置什么样式。
第一种:没有美工图,自己边思考布局
这种没有美工图也没有可参考的情况下DIV CSS布局,根据自己实际构思的想法来布局设置CSS,比如布局左右结构时候,那就设置float:left和float:right实现对象靠左靠右,然后思考靠左靠右布局宽度多少,再设置宽度样式。
这种情况下布局网页比较慢,想一点布局一点,可能在思考到布局成功后要达到理想美观效果,可能不断修改CSS样式参数达到细节调整,这样比较耗时,但也是可以知道自己想要布局什么CSS样式。
第二种:查看别人网站网页进行布局
这种情况下,没有美工图,但想和别人网页布局相同(或部分相同),这个时候就要以参考网站为对象,观察或分析对方网站宽度多少、是否有边框、背景样式等样式,根据分析的或获得的样式进行布局设置CSS。当然如果你能知道如何分析对方代码(html和css),可以直接复制对方对应代码进行使用(在DIVCSS5课堂第一节课也会教大家如何快速获得别人网站代码)。
第三种:有美工图情况 进行CSS布局网页
有美工图是相对其它两种布局比较好确定CSS样式的,一切需要设置样式包括样式值都可以从美工图上分析和获取到。
比如设置字体颜色,可以直观直接看到需要设置字体颜色样式,并通过软件获取美工图的对应颜色值,即可布局好所需css字体颜色。
当然在divcss5培训第三节课也教大家如何使用软件与如何获取宽度、背景图片、颜色等样式。
如何确定要对DIV设置什么CSS属性样式呢?的更多相关文章
- 通过id设置的css属性和通过元素设置的css属性冲突了,优先级哪个高?
---恢复内容开始--- <!DOCTYPE html> <html> <head> <title>div test</title> < ...
- 点赞功能实现 $(tag).css('属性', '样式')
1. 创建标签 document.createElement() 2.$(tag).css('属性', 样式) 赋予标签属性样式 3.设置定时器 改变位置 大小 <!DOCTYPE html&g ...
- jquery的animate()方法也可设置非css属性
如题,举例: $('body').animate({scrollTop:0}, 1500); $("body").animate({scrollTop:"-=" ...
- html / css打印样式
最近做公司后台系统,需要打印贴箱标签,按照正常打印A4纸的标准,测试的效果不是自己想要的,文字排版布局都乱了,查了一些资料,需要设置的东西我总结了一下: 显示器(screen)和打印机(printer ...
- 跨平台移动开发 Xuijs超轻量级的框架Style CSS属性用法
PhoneGap里面推荐使用的超轻量级的框架 Style CSS属性用法 设置css属性:setstyle 通过ID设置css属性 x$('#top1').setStyle('color', '#DB ...
- css table样式
1.table样式首先设置表格边框,属性设置表格的边框是否被合并为一个单一的边框. table{ border-collapse: collapse; border-spacing: 0;} 2.固定 ...
- js进阶 11-3 jquery中css属性如何操作
js进阶 11-3 jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...
- 通过设置CSS属性让DIV水平居中
通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...
- DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title& ...
随机推荐
- 三. var let const的理解 以及 立即执行函数中的使用 以及 for循环中的例子
一. 立即执行函数 windows中有个name属性,name='' '' var 如果我们用var name 去声明,那就会改变windows中name的值(因为我们不是在函数作用域中声明的,所以会 ...
- [JZOJ4633] 【GDOI2017模拟7.15】萌萌哒
题目 描述 题目大意 给你一个数列,接下来有许多个操作,使得区间[l1,r1][l_1,r_1][l1,r1]和[l2,r2][l_2,r_2][l2,r2]对应的位置染上同样的颜色(使得它们 ...
- vim的个性化配置(方便编程)
在用户主目录下新建vimrc即可.例如: vim ~/.vimrc 然后复制进去即可. 配置如下: "关闭vim一致性原则 set nocompatible "显示行号 set ...
- jquery.cookie.js时间设置
var expiresDate= new Date(); expiresDate.setTime(expiresDate.getTime() + (120*60*1000)); $.cookie('u ...
- Linux网桥端口的arp问题
Linux的brctl addif命令可以将一个接口加入到既有的网桥中,接下来,这个接口就成了brport,属于一个从属的接口,然而你还是可以看到它的,并且可以为它添加IP地址,然后route命令会显 ...
- Cesium官方教程9--粒子系统
原文地址:https://cesiumjs.org/tutorials/Particle-Systems-Tutorial/ 粒子系统介绍 这篇教程带你学习Cesium的粒子相关API,比如如何在你的 ...
- java基础之Calender类
Calendar: Calendar类概述 Calendar 类是一个抽象类,它为特定瞬间与一组诸如 YEAR.MONTH.DAY_OF_MONTH.HOUR 等 日历字段之间的转换提供了一些方法,并 ...
- 前端面试题(js部分)
一.==和===的区别 1.== 用于比较.判断两者相等,比较时可自动换数据类型 2.=== 用于(严格)比较.判断两者(严格)相等,不会进行自动转换,要求进行比较的操作数必须类型一致,不一致时 ...
- double转integer
double id0 = row.getCell(0).getNumericCellValue(); Integer id = Integer.valueOf(Double.valueOf(id0). ...
- 去掉IE提示:internet explorer 已限制此网页运行脚本或Activex控件
运行加载OCX控件的HTML文件,显示提示如下图: 解决方法是在HTML文件中添加一行注释代码,如下图: 就是红色框内的代码.即:<!-- saved from url=(0014)about: ...