网页CSS1

样式的属性

1,背景与前景

 1 background-color:        //背景的颜色
 2
 3 background-image:url        //背景图片
 4
 5 background-attachment:fixed;     //背景固定不随字体滚动,scroll 背景随着字体滚动
 6
 7 background-repert:no-repeat;   //图片不平铺, repeat平铺 repeat-x横向平铺  repeat-y纵向平铺
 8
 9 background-position:center;     //背景居中  ,repeat必须为no-repeat
10
11 background-position:right top;     //背景图放在右上角
12
13 background-position:left 100px top 200px;        //离左边100像素,离上边200像素, 也可设置负值。

2,字体

font-family:                //字体

font-size:                    // 字体的大小 常用12px 14px

font-weight:                 //bold 加粗 normal正常

font-style:                 // italic倾斜 normal正常

color:                          //颜色

text-decoration:           //underline下划线 overline上划线 line-through删除线 none去掉下划线

text-align:                //center 居中对齐 left 左对齐 right 右对齐

vertical-align:            // middle 居中对齐 top 顶部对齐 bottom底部对齐 一般设置了行高在使用。

text-indent:20px;          //首行缩进量

line-height:20px;             //行高

3,边界边框

border 边框
border:  5px solid  blue;             //四边框 5像素 实线  蓝色

border-width:5px ;                       //  分别设置
border-style:solid;
border-color:blue;  

border-top: 5px solid blue              // 顶边框单独设置其他边框一个道理 bottom下  left左   right右

表外间距
margin:10px;           //四边外边框的宽度 auto表示居中

margin-top: 10px;       //上边外边框的宽度10px

margin: 20px  0px 20px 0px;    //按照上右下左 设置的

内容和边框的间距
padding跟margin    一样。
时间: 2024-10-04 01:35:17

网页CSS1的相关文章

网页换肤效果的实现原理

效果原理: 准备几套CSS样式表 调式好每个CSS样式表的兼容性 在点击按钮时,改变link中href的值(js获取link标签,通过js改变href的值,link也可以给其id) HTML和js: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

绝对定位实现网页布局

<!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-

如何使网页自适应电脑屏幕分辨率

在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小. 第一种方法:做一个网页解决问题(长了点) 如果只是因为浏览者改变了浏览器的设置,或者因为浏览器不兼容,使自己精心制作的网页变得"面目全非",那多令人沮丧!下面我们以网页爱好者的常用工具Dreamweaver(以下简称DW)为例,列出几个网页制作初学者较常见的网页布局问题以及解决方法,希望对初学者们有所帮助. 一.消除任意缩放浏览器窗口对网页的影响 一番辛苦做出来的网页,在全屏状态下浏览一切正常.但

js网页换肤

使网页背景颜色可选黄/粉 <html> <head> <meta charset="utf-8"> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <title>网页换肤<

网页布局的例子

横向两列布局 <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">* { marg

使用 Chrome 浏览器插件 Web Scraper 10分钟轻松实现网页数据的爬取

本文标签: WebScraper Chrome浏览器插件 网页数据的爬取 使用Chrome 浏览器插件 Web Scraper 可以轻松实现网页数据的爬取,不写代码,鼠标操作,点哪爬哪,还不用考虑爬虫中的登陆.验证码.异步加载等复杂问题. Web Scraper插件 Web Scraper 官网中的简介: Web Scraper Extension (Free!)Using our extension you can create a plan (sitemap) how a web site

微信网页第三方登录原理

微信开放平台和公众平台的区别 1.公众平台面向的时普通的用户,比如自媒体和媒体,企业官方微信公众账号运营人员使用,当然你所在的团队或者公司有实力去开发一些内容,也可以调用公众平台里面的接口,比如自定义菜单,自动回复,查询功能.目前大多数微信通过认证之后,都在做这个事情. mp.weixin.qq.com 2.开放平台面向的开发者和第三方独立软件开发商.我觉得开发平台最大的开放就是微信登录.当年腾讯没有花大力气去做统一登录这个事情,导致目前各个网站都要弄一套登录机制.好在他们现在认清了局势.开发者

微信开发 网页授权获取用户基本信息

微信公众平台最近新推出微信认证,认证后可以获得高级接口权限,其中一个是OAuth2.0网页授权,很多朋友在使用这个的时候失败了或者无法理解其内容,希望我出个教程详细讲解一下,于是便有了这篇文章. 一.什么是OAuth2.0 官方网站:http://oauth.net/   http://oauth.net/2/ 权威定义:OAuth is An open protocol to allow secure authorization in a simple and standard method

静态网页开发技术-HTML

今天我重新复习了一下静态网页开发技术,概括如下. 一 .HTML文档结构与基本语法 :放置了标签的文本文档,可供浏览器解释执行的网页文件 1.注释标记 2.标记 3.属性 二.基本标记与使用 1.网页基本结构与标记 2.文本与段落标记 3.列表标签 4.超链接标签 5.图片标记 6.定时刷新或跳转 7.表格 三 HTML表单标签与表单设计 1.<FORM>标记及其属性 2  <INPUT>标记及其属性 3 <下拉列表框<SELECT>,<OPTION>