今天是休假,布置了一个作业,是利用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. 阿里云docker镜像加速

    echo "DOCKER_OPTS=\"--registry-mirror=https://yeyieqis.mirror.aliyuncs.com\"" | ...

  2. delphi中exit,abort,break,continue 的区别

    from:http://www.cnblogs.com/taofengli288/archive/2011/09/05/2167553.html delphi中表示跳出的有break,continue ...

  3. Spark:读取hdfs gz压缩包

    spark 1.5.1是支持直接读取gz格式的压缩包的,和普通文件没有什么区别: 使用spark-shell进入spark shell 交互界面: 输入命令: sc.textFile("\h ...

  4. Eclipse开发快捷键技巧

    1.alt+?或alt+/:自动补全代码或者提示代码 这个是我最得意的快捷键组合了,尤其是当输入syso几个字符之后,2个手指轻松按下这2个键的时候,自动就补全System.out.println() ...

  5. Web攻防之XSS,CSRF,SQL注入

    摘要:对Web服务器的攻击也可以说是形形色色.种类繁多,常见的有挂马.SQL注入.缓冲区溢出.嗅探.利用IIS等针对Webserver漏洞进行攻击.本文结合WEB TOP10漏洞中常见的SQL注入,跨 ...

  6. Linux上USB移植错误解决笔记

    在内核目录下先配置支持USB设备,无论你是什么设备,这一步都是必须的,USB驱动和其他的驱动不同,它分为USB设备驱动,另外还有USB-Host主机控制器的驱动,配置如下: Device Driver ...

  7. centos安装mono

    1.查看mono最新版本 http://download.mono-project.com/sources/mono 2.安装依赖环境 sudo yum install cmake automake ...

  8. RGB颜色表

    RGB(255,23,140)是光的三原色,也即红绿蓝Red.Green.Blue,它们的最大值是255,相当于100%. 白色:rgb(255,255,255) 黑色:rgb(0,0,0) 红色:r ...

  9. Dynamics AX 2012 在BI分析中建立数据仓库的必要性

    AX系统已有的BI分析架构 对于AX 的BI分析架构,相信大家都了解,可以看Reinhard之前的译文[译]Dynamics AX 2012 R2 BI系列-分析的架构 . AX 的BI分析架构的优势 ...

  10. php日常日志写入格式记录

    从数据库取出数据数组格式保存 file_put_contents('/tmp/bak_trusted_list'.date('H').'.php', '<?php return '.var_ex ...