今天是休假,布置了一个作业,是利用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. iOS,手势识别简单使用

    1.iOS目前支持的手势识别(6种) 2.点按手势和慢速拖动手势简单使用 iOS目前支持的手势识别(6种) UITapGestureRecognizer(点按) UIPinchGestureRecog ...

  2. Node.js的特点

    作为后端JavaScript的运行平台,Node保留了前端JavaScript中些熟悉的接口,没有改写语言本身的任何特性,依旧基于作用域和原型链,区别在于它将前端中广泛应用的思想作用到了服务器端.下面 ...

  3. PCB的封装尺寸

    PCB封装主要分为贴片式与插件式 1)贴片元件封装说明发光二极管:颜色有红.黄.绿.蓝之分,亮度分普亮.高亮.超亮三个等级,常用的封装形式有三类:0805.1206.121  (常用封装为RB.1/. ...

  4. 计蒜客A

      联想公司最近要设计一个体现公司文化的 logo.联想的设计师想出了一个方案:先画了一个顶点 O,接着画出以顶点 O 为公共顶点的.夹角为 θ的两条线段 l1​​ 和 l2 其中 l1作为圆 C1的 ...

  5. 转-- js(jQuery)获取时间的方法及常用时间类

    来自:http://blog.csdn.NET/liujun198773/article/details/7554628  感谢 $(function(){ var mydate = new Date ...

  6. python web前端

    概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器 ...

  7. 使用IIS发布WCF服务

    上一篇是Windows服务为宿主的WCF服务,现在用IIS为宿主发布WCF服务. 第一步:肯定是新建一个WCF服务啦[是WCF服务应用程序],然后在解决方案上再次添加一个新项目[我们选择WCF服务库, ...

  8. jq 弹半透明遮罩层

    jquery制作点击按钮弹出遮罩半透明登陆窗口 // )[^>]*$|^#([\w-]+)$/,M=/^.[^:#\[\.,]*$/,ka=/\S/,$= /^(\s|\u00A0)+|(\s| ...

  9. c#学习 流程控制语句

    语句是啥? 语句就是程序的基本结构.程序是一个人,语句就是人的身体.而写程序的人就是上帝造人的过程. break在swich语句中很严谨 using System; public class Grad ...

  10. 想学习Android开发

    最近被别人说知识面窄,心里受伤了.准备学学Android开发,如果能在手机里运行自己写的app,那是多么high ~~~ Android开发需要看什么资料呢? 说明:本人一直从事windows下的C+ ...