今天是休假,布置了一个作业,是利用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. [CC]DgmOctree—执行Cell遍历和单元计算

    DgmOctree类的executeFunctionForAllCellsAtLevel和executeFunctionForAllCellsStartingAtLevel方法通过回调函数octree ...

  2. 简介 jCanvas:当 jQuery遇上HTML5 Canvas

    https://github.com/caleb531/jcanvas HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在 ...

  3. postgresql修炼之道学习笔记(2)

    随后的章节  介绍了基础的sql,这个我略过了,我喜欢在开发的时候,慢慢的研究,毕竟有oracle的基础. 现在,学习psql工具 使用create database创建数据库的时候,出现如下问题: ...

  4. Leetcode: Encode String with Shortest Length && G面经

    Given a non-empty string, encode the string such that its encoded length is the shortest. The encodi ...

  5. paper 117:image matting 数字抠图

    很多公式和图传起来比较麻烦,其实这是一篇论文(仅参考) 图像和视频抠图(Matting)技术可以分成自动和半自动:根据背景的先验知识,又有蓝屏背景,已知背景,和自然背景扣图.报告介绍了自然背景下的半自 ...

  6. nodejs与模块soap的用法

    最近做了点东西要求用到soap模块,我是怎么知道的呢,收到了 <soap:Body><soap:Fault><faultcode>soap:Client</f ...

  7. Centos Samba 服务器 iptables 和 SElinux 设置

    1.安装samba服务器 # yum install samba 2.配置 # vi /etc/samba/smb.conf security = user (100行左右) 在Share Defin ...

  8. 字符串操作 replace

    "hello".charAt(0); // "h" "hello, world".replace("hello", &q ...

  9. WP 手机Lumia 820 锁屏密码的破解研究

    Windows Phone lumia 手机锁屏密码的破解研究     大家好今天给大家分享一个最新研究案例, 近日笔者接Nokia Lumia 820, 由于客户密码失误太多,导致锁屏23000余分 ...

  10. java 线程 障碍器

    package de.bvb; import java.util.concurrent.CyclicBarrier; import java.util.concurrent.TimeUnit; /** ...