鱼C论坛

 找回密码
 立即注册
查看: 14279|回复: 78

[技术交流] <003>加一点样式

[复制链接]
发表于 2015-7-3 08:32:22 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 戴宇轩 于 2015-7-5 13:01 编辑

上一课答案
  1. <html>
  2.   <head>
  3.     <title>Mission</title>
  4.   </head>
  5.   <body>
  6.     <h1>宗旨</h1>
  7.     <p>鱼C工作室致力于完全免费编程视频教学,主要推出的课程有零基础入门学习C语言,零基础入门学习汇编语言,Win32汇编语言,零基础入门学习Delphi,零基础入门学习Python,Windows程序设计,SDK编程,解密系列,OD使用教程,密码学</p>
  8.   </body>
  9. </html>
复制代码



加一点样式

好的。我们已经有了结构,现在来集中精力关注它的表现
    当浏览器显示HTML时,它会使用内置的样式来显示这个结构,如果完全依赖浏览器,页面看起来会很难看,对吗?
    下面就要用到CSS了,利用CSS,可以描述如何表现你的内容。下面动手试试,让这个鱼C的页面更美观!



认识style元素

要增加样式,需要在页面上增加一个新的元素——<style>,下面我们回到鱼C的页面,加一些样式,试试看……
style1.PNG
既然你已经有了一个<style>元素,那么你现在要做的就是写下一些CSS,让你的页面更炫!
style2.PNG
课件下载: SourceCode.zip (968 Bytes, 下载次数: 203)



看看页面有什么改变

result.PNG
哇!区区几行CSS就让HTML变得如此漂亮,可见CSS强大的威力了吧!
尽管只是简单地看一眼CSS,就大概可以知道每一句是做什么的,想想看,每一句样式是做什么的。

试试看将每一句CSS和其功能联系起来
IMG_20150702_165011.jpg
答案:
游客,如果您要查看本帖隐藏内容请回复


小练习
下载这一课课件,尝试将mission.html的样式变得跟index.html一样



评分

参与人数 1荣誉 +8 鱼币 +8 贡献 +8 收起 理由
小甲鱼 + 8 + 8 + 8 热爱鱼C^_^

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2015-7-3 12:09:30 | 显示全部楼层
楼主辛苦了~~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-7-3 12:52:48 | 显示全部楼层
  1. <meta charset='utf-8'>
复制代码

作业:
  1. body{background: navajowhite; margin: 0 20%; padding: 10px; border: 1px dotted;}
复制代码


开课都不艾特我。能不能好好玩耍。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-7-3 13:24:15 | 显示全部楼层

这几天学pygame,把你忘了,不好意思。。。

不过现在讲字符编码有点早,我会在HTML5标准里讲到
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-7-3 20:08:40 | 显示全部楼层
戴宇轩 发表于 2015-7-3 13:24
这几天学pygame,把你忘了,不好意思。。。

不过现在讲字符编码有点早,我会在HTML5标准里讲 ...

呃,我这里不加编码的话不能正常显示,所以加了一下。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-7-3 20:11:56 | 显示全部楼层
wei_Y 发表于 2015-7-3 20:08
呃,我这里不加编码的话不能正常显示,所以加了一下。

要仔细看。。。第二课第四张图下面。。。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-7-3 20:15:28 | 显示全部楼层


不好意思,发帖子时候漏了一张图,关于写好的CSS(就是课件下载上面那个)
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-7-3 20:25:30 | 显示全部楼层
戴宇轩 发表于 2015-7-3 20:15
不好意思,发帖子时候漏了一张图,关于写好的CSS(就是课件下载上面那个)

嗯嗯,每次都换太麻烦了嘛。。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-7-5 23:04:13 | 显示全部楼层
看看咯,教程更新的还蛮快的咯
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-7-6 22:38:22 | 显示全部楼层
回复看看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-7-7 07:02:32 | 显示全部楼层
看看看你看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-7-8 09:00:45 | 显示全部楼层
学习中!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-7-13 12:29:23 | 显示全部楼层
:L 这都要隐藏啊……
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-7-28 11:09:19 | 显示全部楼层
答案
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2015-7-28 11:30:33 | 显示全部楼层
真心不错
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-8-7 14:14:45 | 显示全部楼层
第三课加油
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-8-13 11:54:39 | 显示全部楼层
终于到第三课了,加油!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-8-21 10:23:14 | 显示全部楼层
回复了,给我看看吧
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-8-24 17:42:20 | 显示全部楼层
页边距
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-9-16 16:30:44 | 显示全部楼层
顶楼主啊   
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-25 10:29

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表