今天是休假,布置了一个作业,是利用CSS制作斯坦福大学官网。虽然是一个并不复杂的制作,却让我第一次体会到了想摔鼠标的感觉。 遇到了很多问题,却找不出自己到底是哪里出了问题,简简单单的一个logo。足足多了快两天了,都没有按照自己理想的情况完成,不着图标位置出了问题,就是放不到该放的位置。

一个<div></div>放在另个<div></div>内,表现的样式应该是一个图层在另一个图层内部,但是实际动手操作,却不是这样,而是硬生生把另一个div挤到另一行。

 
按理说web和peopl应该在logo右边,而输入文本框在web和people的右边,结果却成了这样。(输入文本框实际也在外面,是通过“设计”用鼠标硬生生拖上来的)。
而下面的导航赢还是横向由左到右一次排列,加入   float:left便可,但是加入后,却还是纵列排序,住不过跑到了屏幕右边。
另外就是CSS选择器(.  #    *),虽然是一个很简单的东西,却因为在一个<div></div>内,有id,有name,有class,标签多,且取名杂乱,稍不注意,选择器便会出现问题,又会导致问题出现,在浏览器中浏览时,不会出现预想的效果。另外,对于这三种选择器的使用,还是迷迷糊糊,在何时应该定义成什么,而什么时候有应该用什么选择器,虽然没有硬性规定,却感觉麻烦复杂非常!!!
另外三种样式表(内联样式表、内嵌样式表、外部样式表),虽然明白其优先性的问题,却依然不知道在实际中该如何运用,什么时候该用哪一个。虽然感觉内嵌样式表使用比较多,却又感觉这个样式表出错率比较多,因为需要通过选择器与他相定位、相关联。出了问题后,只要标签一多,查找起问题便是一个大工程。
主要问题就是div的布局。其相关位置,绝对位置,在实际动手中,总是出错,与原本的理解不一样。另外一整个屏幕作为底板的布局中,div的位置放置,和多层div的重叠分布,是一个重点不理解的的地方。虽然感觉在课上听起来还算明白,但是实际动手操作总是差强人意。如开头所说,一个div在另一个里面,只需要再此div内部加div便可,却不知道因为什么原因,总是覆盖不上。上下左右的排列也总是对其不了。对div宽和高的设订于相对、绝对未知的设订搞不明白。
希望可以在这些点上多下功夫,要以最快的时间搞清楚。马上要开始JS语言的学习,不然就要拉下。可不能越拉越多!

CSS选择器、标签,div的位置。的更多相关文章

  1. HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类)

    一.标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. html之css选择器学习

    相关内容: 什么是css选择器 标签选择器 类选择器 id选择器 并集选择器(分组选择器) 交集选择器 后代选择器 子标签选择器 属性选择器 相邻兄弟选择器 伪类选择器 伪元素选择器(伪对象选择器) ...

  3. css选择器及css优先级

    三个css选择器:id选择器#test1{ }.class选择器.test2{ }.标签选择器div{ }对三个div:<div>我是普通div</div>.<div i ...

  4. CSS简介和CSS选择器

    <pre name="code" class="html">Css 简洁 css 选择器 标签选择器 类选择器 ID选择器 Css 层叠样式表 Ca ...

  5. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  6. python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  7. Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  8. day42:HTML标签和CSS选择器

    目录 1.HTML 1.1 文档结构 1.2 head标签 1.3 body标签 1.3.1 h1-h6标签 1.3.2.br标签:换行 1.3.3.hr标签:一行横线 1.3.4 a标签:超链接标签 ...

  9. Html 之div+css布局之css选择器

    CSS选择器 什么叫选择器?通俗的来说就是 我想改变html 中某个地方的  字体大小 或者背景色 或者其它属性 内边距 外边距,宽度高度 等等 一些Css 样式. 那么我们如何找到对应的 元素呢? ...

随机推荐

  1. SpringMVC操作指南-整合Spring、SpringMVC、MyBatis、Log4j/Log4j2及JUnit4搭建项目框架

  2. LL谱面分析和难度标定

    LL谱面分析和难度标定 先介绍一下LL谱面的存储方式:TimeLine序列(简称TL序列),TL序列中的每一个元素(即音符)可以由一个C语言中的结构体来表示: struct note{ int lin ...

  3. 为什么使用spring

    现在基本的项目都会用到spring框架,那么我们为什么要使用spring呢?下面为大家总结一下,希望大家指正. spring是一个轻量级的容器框架,其核心是IOC(控制反转也叫依赖注入)和AOP(面向 ...

  4. jQuery的13个优点

    1.轻量级 JQuery非常轻巧,采用Dean Edwards编写的Packer压缩后,大小不到30KB,如果使用Min版并且在服务器端启用Gzip压缩后,大小只有18KB. gzip: 每天一个li ...

  5. UVALive 7148 LRIP(树的分治+STL)(2014 Asia Shanghai Regional Contest)

    题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&category=6 ...

  6. Flex 布局2

    Flex 布局2     你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Sch ...

  7. HTML5探秘:用requestAnimationFrame优化Web动画

    本文转载自: HTML5探秘:用requestAnimationFrame优化Web动画

  8. 论文阅读(Chenyi Chen——【ACCV2016】R-CNN for Small Object Detection)

    Chenyi Chen--[ACCV2016]R-CNN for Small Object Detection 目录 作者和相关链接 方法概括 创新点和贡献 方法细节 实验结果 总结与收获点 参考文献 ...

  9. css深入理解z-index

    z-index取值 z-index:auto;z-index:<integer>;z-index:inherit;继承 特性: 1.支持负值2.支持css3 animation动画;3.在 ...

  10. 如何申请国际版Office365和Azure的试用账号

    关键字:国际版.Office365.Azure.试用账号.1美元.信用卡 待续