html--基础-css

在页面设计时,我们都需要用到css样式表。我们在设计页面时,都需要一定的美学在里面。符合市场的需求和用户的习惯。现在的页面的设计是越来越讲究简洁,优雅,而富有动感。更加体贴用户的操作和上网操作。这是我们的设计理念。

在一个完整的网页设计中,我们需要先架设网页的结构。这是非常基础的。网页的结构是考验我们对盒模型的理解和掌握。还有对标签的语义化的理解。因为在html5中,我们的规范是我们的标签的使用和语义化。要符合标签的特性。这是,我们要注意的。一些标签的分类是很重要的,行内元素,块元素,行内块的元素。是我们元素的基本属性。我们要第一要明白的元素的特性。比如,mata标签是提示页面的关键信息和内容。a标签是导航的信息标签。b ,i标签是强调的信息等等。我们要语义化的使用标签。p标签是表示段落的标签。br标签是换行的作用。还有分组的行的标签。ul ol tr td  li   div dl dt dd  这些标签是表示分组的功能。可以模拟块状的概念,说明列表的 无序列表(ul) 有序列表(ol)(dl)表示定义一系列的术语和说明的列表。在分组的标签中,我们还是比较常见的。hr标签是表示段落的主题转换。div是盒模型,是我们页面结构的最基础的元素。

在划分内容方面,我们可以使用article元素,footer元素 header元素,nav元素,section元素,aside元素。这是我们在页面结构中,必须要用的元素。都是块级元素。结合我们其他的元素(表示文本的元素,表示分组的元素,表示制表的元素,表示创建表单的元素,盒模型的元素。)结合使用就可以我们的结构更加合理一些。我们可以考虑表格的用法。

在调试复杂的每个元素的距离时,我们可以多用盒模型来容纳起来,可以整体的来调试样式。通过盒模型的属性来进行设置每个元素的距离。还有注意的是权重的限制。在多嵌套的时候,我们要尽量写完整选择器,才能有效的避免权重的限制。在使用元素进行布局时,我们要注意是,元素的类型和特点。行内元素的 块状元素,行内块的元素的特点。是否独占一行,能不能和其他元素共享一行等。这是基础的东西。我们在设置元素结构的样式时,我们需要从外到内来进行一级一级的设置。不要东设西设,最忌讳这样设置css样式。我们在设置浮动的时候,我们要注意是浮动的特性。hover的特性。

在css中,我们学习的比较重要的是,定位。在今天的学习中,我们学习的是改变元素在容器块中的定位方式。position使用的是这个属性。在定位的方式是三个方面属性。position relative 相对定位 position absolute 是绝对对位。position fixed 是固定定位。还有设置定位元素相对于容器的边界的偏移量的属性。top left bottom right 属性。设置元素的层叠顺序。z-index 属性。可以设置定位的权限。防止定位的覆盖。如果发生定位的覆盖的话,我们可以在权限上去调式。用z-index去调。z-index属性是划分层叠的关系。是上下文的层叠关系。只限于定位元素。层叠的关系是内容,定位 浮动  block盒子 负z-index属性 层叠上下文。在嵌套多层定位时,我们要注意的是子集和父集之间的关系。position absolute的绝对定位的特性。是以离它最近的父集定位元素为基准。所以,我们要调好定位元素的父子集的关系。可以依次嵌套定位。也可以设置定位元素的重合。来进行滑动切换。通过显示和隐藏来进行滑动的切换。这是定位的妙用。因为定位的元素的位置是随机的,我们可以先将定位的元素的偏移量(top,left)为零。再来进行设置具体的偏移量。

需要注意的是:如果<span> <a>元素,绝对定位后,会改变<span><a>标签的display类型。成为块级元素。这个我们需要注意的是span标签和a标签绝对定位的时候,元素类型的改变。还有,在重置样式表中,@charset "utf-8"; 这个分号一定要加上。不然,下面的重置样式是无效的。

<button></button> 标签,我们会经常遇到<button>标签与input标签的对齐来进行制作搜索框的实例。我们通过圆角的变化来进行设计搜索框的样式。一个完整的网站的需要不同的搜索框,来搜索内容。提交数据。在样式的变化上,我们一般会用到的input标签和form表单一起连用。数据的提交一般离不开不了form表单。向后台提交数据。在input和submit或者是button按钮的对齐方式上。我们经常会发现对不齐的现象。因为在行内块的元素的需要用到vertial-align的属性的。这个属性,可以用到行内块的元素的对齐方式的。比如像图片 input标签等等,我们都需要用到的属性的。在搜索框的对齐方式上,我们用到的是vertiacl-align:middle;这个方式来进行对齐input和submit的对齐方式的,在高度的上的对齐,button按钮,submit和input的高度是不一样的,因为两种方式是在所按的标准的不一样,也就是说,button和submit按钮是按照的是高度包含边框,而input标签是不包含这边框的。所以,我们要考虑的是边框的宽度。这是我们要经常用到的。还有各种竖杠,也是通过span标签来进行操作。通过高度,宽度,边框的宽度来进行操作的。我们可以通过各种方式来进行。注意:在行内块的元素是有3像素的间隔的。我们可以通过浮动来进行解决的。

在css样式中,我们要避免设置的是id样式。权重高,会对后面的元素造成影响的。这个是经验的。样式的设置要分析好结构的,通过类选择器的作用,我们可以一样的样式统一设置的。这样可以减少我们的工作量。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,869评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,716评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,223评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,047评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,089评论 6 395
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,839评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,516评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,410评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,920评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,052评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,179评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,868评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,522评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,070评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,186评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,487评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,162评论 2 356

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,754评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,673评论 18 139
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,251评论 1 41
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,836评论 0 6
  • ❑参数文件:告诉MySQL实例启动时在哪里可以找到数据库文件,并且指定某些初始化参数,这些参数定义了某种内存结构的...
    邱杉的博客阅读 1,138评论 0 51