今天接着说网页制作之 【css】技术~~

按照昨天的学习,已经能对一个网页初步的实现了,今天讲的这个css就相当于给页面穿一件漂亮的衣服~~

话不多说,直接看我的总结如下:

1.css是什么?有什么用?

HTML------->页面的结构

CSS:----------->美化页面

2.css入门案例

· 步骤1:创建一个HTML文件

· 步骤2:在HTML上创建一个标签

· 步骤3:标签中新增一个style属性

如:

3.为什么使用css代替HTML属性设置样式呢?

因为HTML属性在单独使用时有一定的局限性,所以需要配合css样式代码才可以更好的展示更为丰富的效果。

4.css的代码规范

放置规范:

格式规范:

选择器名称 {属性名1:属性值1;属性名2:属性值2}

选择器:即指定css样式作用在哪些HTML标签上

5.css选择器

元素选择器:

格式: 标签名{

Css的样式代码

}

类选择器:

格式: .类名{

Id选择器:

格式: #id值{

6.边框样式:

包含:border(设置边框)、width(设置宽度)、height(设置高度)、background-color(设置背景颜色)

以上是总结的核心部分

但是这里想要表明的一点就是,一定要对应的去敲一遍,其实每天只需要一个多小时的学习时间,都敲一遍,自然感悟不一样,一定要去练,一定要去练

由于减轻大家的阅读,这里我不把自己所敲的代码都贴出来,但上面写的这些代码我都敲了一遍,你若感兴趣也可尝试,有疑惑之处可以给我留言交流

通过今天的学习,把昨天完成的页面,稍作改动,效果如图:

代码实现如图:

写到最后,说实话,当看到有朋友在各个自媒体平台上看到我每天写的东西,我还是有一种想要尽量写好的心态,也要对的起读者时间,前期我在不断的尝试用什么方式更好的呈现,让有兴趣的读者能学到东西~~

因为这是编程类的内容,有一定的专业性,为了让读者更好上手,后期我在想是否可以通过录播的方式,记录下自己的学习过程,以便让大家看的更清楚,若大家有什么好的建议,欢迎给我留言~~

当然了,等把技术这块的基本构架和大体流程学习完毕之后,我也会分享当下最热门的产品解读,把每一个时期的成长分享给大家~~

谢谢,今天先分享到这里~~

举报/反馈

html5编程技术代码,编程技术—CSS技术相关推荐

  1. 超能陆战队大白html代码,HTML加CSS技术打造超能陆战队的大白

    一.应用知识点 1.2实验知识点 div布局 CSS相对定位 CSS各种属性的应用 1.3实验环境 本实验环境采用带桌面的Ubuntu Linux环境,实验中可能会用到桌面上的程序: Firefox: ...

  2. 【JavaWeb - 网页编程】一 HTML技术与CSS技术

    第一章 HTML技术与CSS技术 创作日期:2021-12-19 1.1 网页简述 1.1.1 B/S软件的结构 1.1.2 前端的开发流程 1.1.3 网页的组成部分 页面由三部分内容组成: 内容( ...

  3. python编辑器_没有人比它更懂少儿编程,慧编程Python'吮指编辑器'

    咳咳! 大家好,我是偶尔写文章的康康老师. 今天跟大家介绍的是慧编程家的,睡在Scratch上铺的兄弟--慧编程Python编辑器. 这是一款集才华和颜值为一体的'吮指'编辑器! 忘记肯德基,你的手指 ...

  4. 机器人编程和少儿编程哪个难

    机器人编程和少儿编程哪个难?现在的家长在培养孩子的学习的时候,会给孩子选择一些能够有利于孩子成长的课程.在这人工智能发展的社会,很多的家长想要孩子去学习机器人编程的课程,但是有的家长对于机器人编程和少 ...

  5. 机器人编程与python语言的区别_少儿编程和机器人编程的区别有哪些?

    少儿编程和机器人编程是目前市面上较为流行的少儿编程培训课程,对孩子逻辑思维的培养非常有益,随着家长对孩子教育的重视,如今少儿编程和机器人编程受到了广大家长的关注,究竟少儿编程和机器人编程的区别有哪些呢 ...

  6. 硬件趣学python编程_没有人比我更懂编程,慧编程'吮指编辑器',简单快乐学python...

    咳咳! 大家好,我是偶尔写文章的康康老师. 今天跟大家介绍的是慧编程家的,睡在Scratch上铺的兄弟--慧编程Python编辑器. 这是一款集才华和颜值为一体的'吮指'编辑器! 忘记肯德基,你的手指 ...

  7. 技术扫盲:关于低代码编程的可持续性交付设计和分析

    作者:小傅哥 博客:https://bugstack.cn ❝ 沉淀.分享.成长,让自己和他人都能有所收获!???? ❞ 目录 一.前言 二.什么是低代码 三.如何落地实现 四.总结 一.前言 CRU ...

  8. java运用网络编程技术代码_Java 网络编程

    java网络编程 1.什么叫计算机网络? 由不同地理位置的不同计算机主机,连接起来组成的网络. 2.什么叫网络编程? 在网络的基础上,使用网络进行编程,对应用层进行设计的活动. 3.网络编程三要素:I ...

  9. 《操作系统原理技术与编程》C代码与习题答案

    <操作系统原理技术与编程>C代码与习题答案 蒋静.徐志伟编著 链接: https://pan.baidu.com/s/14sfT4yaqwqN-B8sQt7rclw 提取码: g623 若 ...

最新文章

  1. AI寒冬论作者再发文:「深」度学习对数据的理解太「浅」了
  2. html恢复按钮按下前的状态,如何通过点击按钮暂停和恢复html页面的执行
  3. androidstudio mac mini_GitHub - jp1017/AndroidStudioPlugins: Android Studio 常用插件及浅释
  4. pythonui教学视频_分享软件开发相关视频教程(Java、C++、Python、UI设计、HTML5、iOS)...
  5. ansible常用基础命令整合
  6. java mysql查询语句_Mysql查询语句执行过程
  7. 【转】3款Win7仿其他系统主题
  8. ES设置用户名和密码
  9. 如何在宝塔面板中屏蔽垃圾蜘蛛?
  10. android 手机 对比,看!Android平台三款手机浏览器对比评测
  11. 《Real-Time Rendering 4th Edition》全文翻译 - 第6章 纹理化(上)6.1 ~ 6.3
  12. mysql 计算自然周
  13. 【Unity Shader】 CubeMap(立方体贴图)
  14. 【疑难解决】H265编码流媒体播放器EasyPlayer.js播放HLS H265视频流,遇到黑屏如何排查?
  15. 径向渐变加阴影html,CSS径向渐变阴影 - 反转
  16. 当把Python的过程文件发给其他人,如何方便别人快速下载过程文件所需要的库
  17. 3KAL芯片规格书,3KAL电路图
  18. wifi热点创建和自动连接
  19. 计算机科学与技术没落,这七所985一个A+学科都没有评上?有点尴尬了
  20. 【SpringBoot学习】5、SpringBoot 实现文件上传,图片上传并显示功能

热门文章

  1. php 正则匹配中文标点,JavaScript_js实现正则匹配中文标点符号的方法,本文实例讲述了js正则匹配中 - phpStudy...
  2. mysql和mysqlinnodb_mysql数据库存储引擎和innoDB
  3. xtrabackup mysql8.0_Percona XtraBackup 8.0, 安装与测试
  4. 注册表修改大全(浏览文章时可以使用CTRL+F查找)
  5. 罗翔 ---- 理想主义的花
  6. PHP使用weui,微信小程序WeUI引入
  7. java 重载赋值_java中构造方法,set/get方法,方法重载使用解读
  8. mysql btree fulltext_Mysql主要索引方式:FULLTEXT,HASH,BTREE,RTREE。
  9. 东财计算机应用基础在线作业一,东财《计算机应用基础》综合作业
  10. procreate 笔刷_插画学习必备:2000款Procreate大师级笔刷,超级强大,免费领取