html和css学习心得

    系统学习web前端大概有一周了吧,看了《Head First HTML与CSS》,这本书属于入门书,语言浅显易懂,跟着书敲代码很快的,我大概用了一天就看完了,同时对html和css有个系统的认识了。接着看了《精通CSS》第二版,受益最多的是从中学会了布局,用好position和float,还有结构与表现分离的思想。然后开始javascript的学习,看了入门必备书《javascript DOM 编程艺术》,这本书也比较基础,适合新手入门,由于我之前学过C、C++和python,有一定的编程基础,大概两天时间过了第一遍,然后花了两个多小时看了第二遍,感觉这些专业性较强的书,光看一遍是不够的,得多看几遍,每一遍都有不同的收获。

    看完了这几本书后,我尝试模仿几个静态网页,今天模仿了11对战平台的首页,花了几个小时终于作出了一个勉强还能看的静态网页。我知道自己还有很多需要完善的知识点,现在就总结下今天的工作吧。

    在设计网页时,要分析网页分为几个部分,也就是能够切好图,logo、导航栏、边栏、页眉、页脚等都事先分配好位置,给它们命名要简单易懂。

    第一步做好后,建立一个相对完整的html结构,也就是纯html文档,一个完整的骨架先造出来然后再去给它穿衣服。在建立html文档时,要分析哪里该用div,什么情况用class,什么情况用id。一般来说,如果是比较通用类的,用class,而比较特殊只会出现一次的比如页角、侧栏等,可以选择使用id来标记。

    骨肉已经成型后,该给它穿衣服,也就是css的编写了。首先应该从body开始,给body设置规则比如width,margin、background-color等,然后一层一层来设置,这个过程时最复杂最麻烦,基本95%的时间是花在这上面的。

    在上面做好后,就是一些边边角角的修改了,比如位置的微调,颜色微调等。

    模仿一个复杂的网页需要注意的东西太多了,某一个位置的一张图片的设置:是一定宽度和高度的范围然后让图片作为背景覆盖,还是单纯一个<img../>搞定呢,这两个方案各有各的特点,采用什么方案得看实际情况,如果是比较大的如logo可以做用“背景法”来处理,如果是文本中的图片,则用第二种方法会好些。

    一般网页在高度宽度变化时会有相应的适配方案,当网页扩大缩小时能保证网页内容能不“失真”,在《精通CSS》中看到,如果向让浮动的元素不随着网页大小变化而发生位置的变化,得给浮动的元素一个宽度,这样在网页大小变化时,浮动元素大小始终是不变的。

    上一张今天模仿11对战平台主页的截图,大部分的内容都实现了,有一个广告轮播的效果还没有做出来,只贴了张静态图代替那个地方,我偷了点懒没有用javascript,其他的地方除了位置可能有点偏差和有些图大小有误差,大的问题没有。


  • 7
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
操作 HTML 元素和 CSS 样式是 JavaScript 中重要的 DOM 操作。以下是一些心得: 1. 获取元素:可以使用 `document.getElementById()`、`document.getElementsByClassName()`、`document.getElementsByTagName()` 和 `document.querySelector()` 等方法来获取 HTML 元素。这些方法都返回一个元素对象,可以使用这个对象来操作元素。 2. 操作元素属性:可以使用 `element.attribute` 或 `element.getAttribute()` 来获取元素属性,使用 `element.attribute = value` 或 `element.setAttribute(attribute, value)` 来设置元素属性。例如,可以使用 `element.style.backgroundColor` 或 `element.style["background-color"]` 来设置元素的背景颜色。 3. 操作元素内容:可以使用 `element.innerHTML` 或 `element.textContent` 来获取或设置元素的内容。 `innerHTML` 返回元素内部 HTML,而 `textContent` 返回元素内部文本。 4. 操作元素样式:可以使用 `element.style` 对象来设置元素样式。例如,可以使用 `element.style.backgroundColor` 或 `element.style["background-color"]` 来设置元素的背景颜色。也可以使用 `element.classList` 对象来添加、删除或切换元素的 CSS 类。 5. 动态创建元素:可以使用 `document.createElement()` 方法创建新的元素,使用 `element.appendChild()` 方法将新元素添加到文档中。例如,可以使用以下代码创建一个新的 `<div>` 元素,并将其添加到文档中: ```javascript var newDiv = document.createElement("div"); newDiv.innerHTML = "This is a new div!"; document.body.appendChild(newDiv); ``` 6. 事件处理程序:可以使用 `element.addEventListener()` 方法来添加事件处理程序。例如,可以使用以下代码在单击按钮时显示警告框: ```javascript var button = document.getElementById("myButton"); button.addEventListener("click", function() { alert("Button clicked!"); }); ``` 以上是一些基本的操作 HTML 元素和 CSS 样式的技巧和心得。在实际开发中,可以根据具体需求采用不同的方法和技巧来操作 DOM。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值