web网页简单设计补充的css知识点

了解了web的基本框架,html和css,补充几点知识点
常见表示颜色的几种方法:
red
#f00
rgb(255,0,0)
rgba(255,0,0,0.5) 带透明度的色彩值
opacity: 50%;透明度
border-radius:圆角
border-radius:值
值:a 表示四角都为相同的圆角状态
值:a b 表示 左上,右下都为a,右上,左下都为b
值:a b c 表示左上为a 右上和左下为b 右下为c
值:a b c d 依次表示 左上 右上 右下 左下
值:50% 表示圆或椭圆
cursor: pointer; /鼠标图标成手状/
定位 所有的定位和top right bottom left 联和一起起作用
position: relative;
position: absolute;
right:0;
left:0;
relative 相对定位 以默认位置为参考点进行移动,
absolute 绝对定位 以最近定位元素为参考点进行移动
fixed 固定定位
定位中水平居中:
margin:auto;
盒子模型:
宽:内容宽+border+margin+padding
box-sizing: border-box;
宽:width+margin (宽=内容宽+border+padding)
图片格式: gif jpg png webp
overflow:hidden; 溢出隐藏
:first-of-type 第一个同类型对象
:nth-of-type(n) 第n个同类型对象 n=数字 odd(奇数行) even(偶数行)
input{
outline:none;} 去外边框线

原文地址:https://blog.51cto.com/14584021/2446433

时间: 2024-11-09 03:46:28

web网页简单设计补充的css知识点的相关文章

Web网页简单的静态导航菜单的制作

Web网页导航菜单的制作 最近初学Html/Css,今天学习了一个简单的静态导航条的制作.属于很简单,很基础的东西. 思路:导航菜单–>书籍的目录,条目性结构–>用无需列表构建导航菜单 1. 首先在html代码中建立ul: <ul> <li><a href="#">首 页</a></li> <li><a href="#">新闻快讯</a></li>

【转】手机web——自适应网页设计(html/css控制)

手机web——自适应网页设计(html/css控制) 就目前形势来看,Web App 正是眼下的一个趋势和潮流,但是,对于Web App的设计可能大家有的不是很了解,下面就将整理好的网页设计的技巧奉献给大家. 作者:佚名来源: 68design | 2013-09-04 11:02 一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="viewport"

手机web——自适应网页设计(html/css控制)(转)

一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="viewport" content="width=device-width, initial-scale=1" /> viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-

JS CSS 网页 简单 右侧 悬浮

<!--右侧效果--> <script> $().ready(function() { $(".orm").hover(function() { $(this).css("right", "-2px"); }, function() { $(this).css("right", "-175px"); }); }); </script> <div class=&quo

精通CSS+DIV网页样式与布局--初探CSS

CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.提起DIV+CSS组合,还要从XHTML说起.XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求."DIV+CSS&q

Web响应式设计中应避免的八大误区

开发一个带有响应式交互设计的网站变得非常有意义,因为其可以在不同的设备运行,因此,你可以节约针对不同平台开发不同网站的成本.但是,要做最大限度相应的网页设计,有些误区你应当避免. 不要优先为桌面版设计 开发者通常会犯的一个常见错误是,但他们设计网站时优先考虑桌面版,因为在这些人严重,将基于桌面版的网站转变为针对其他设备的响应式web设 计 是件很轻松愉快的事情.但是,这个发生在计划规划阶段的错误本身会变成一个非常巨大的问题.甚至会造成返工,当然,大量的错误也会蔓延出来. 然而,基于移动设备开发网

web前端开发教程:div+css的6个优点

关于div+css你知道多少?XHTML网站设计标准中,不再使用表格定位技术,而是采用div+css的方式实现各种定位.一般来说,div+css是web设计标准,它是一种网页的布局方法,与传统中经过表格(table)布局定位的方法有所区别,它能够完成页面页面内容与体现相别离, 那么你在前端开发学习对div+css的优点了解多少呢?接下来Div css教程学习中,为大家介绍web前端开发中div+css的6个优点. 介绍web前端开发中div+css的6个优点 1.契合W3C规范标准.这确保您的网

web网页的表单排版利器--960css

http://www.cnblogs.com/birdwawe/p/4062106.html 表单排版样式 960css 前言 一般web网页的表单排版,大家都习惯用table排版,自己需要根据实际需要去定义TR和TD,很多时候对于TD的高宽度.是否合并行,合并列,都要去做一些处理,这些都是比较繁琐的工作.找到一个表单排版的替代工具,提前定义好CSS样式,无疑可以减轻我们的这些工作. 下面简单一个一个表单排本CSS框架,960css. 960css目录结构 (其中960分为fixed和fluid

Web网站架构设计考虑的因素

转自http://blog.csdn.net/moshengtan/article/details/8990052 1    Web负载均衡 1.1 - 使用商业硬件实现 最常用的F5 与citrix netscaler.比如12306前端的web好像用的就是F5 的BIGIP.如果公司资金足够的话,相对使用开源软件来说理方便. 优点:维护方便,性能稳定 缺点:费用太高 1.2 - 使用开源软件 可选择使用lvs或者nginx做web应用的负载均衡. Lvs工作在tcp 协议4层下,而nginx