ii23休闲社区

 找回密码
 注册(建议使用中文昵称)

QQ登录

只需一步,快速开始

扫一扫,访问微社区

积分、等级、阅读权限说明社区担保,交易无忧
查看: 5197|回复: 19
打印 上一主题 下一主题

[教学] 【茜】爱上学院代码组第一课

[复制链接]

签到天数: 1827 天

[LV.Master]伴坛终老

夕颜染梦
幸福:191℃
跳转到指定楼层
楼主
发表于 2014-10-10 21:10:02 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
本帖最后由 茜。 于 2014-10-11 08:55 编辑

其实,对于HTML,我也不是很熟悉,
只是一年前学习做帖子的时候,跟着百度,自己瞎研究过一段时间,
在这里,对新进的代码组成员,分享一下自己学习的心得;
过程中可能有不对的地方,大家一起学习呗,欢迎指正哈。
先看一下CC之前在社区发过的一个教程,再次谢谢CC曾经的付出。
大家先预习一下吧,这一节先熟悉在线编辑器以及做一个简单的边框。

CC教程链接 http://www.hdcph.com/thread-251441-1-1.html

主楼链接进去,
大家首先熟悉在线编辑器各项功能:

里面鼠标放在各个标签上面 都有解释,所以这里不再详细叙述

在编辑模式下做贴,可以点击预览模式 可以看到帖子的预览效果
下面讲一个普通的边框制作




点击箭头指向的鼠标 在各项标注的选项内  输入值  单元间距  边框粗细 单元间距这些数值具体是什么样的效果
这个大家练习的时候 扩大缩小数值 预览来看相对应的效果如何
边框高度宽度 这个不用解释了 就是设置边框大小的
如果在边框内 排图片啊或者文字啊 可以不设置高度,就是A处,直接加内容,会自动扩大的
这里需要提醒的是  在DZ表格里面  咱们换行  是直接敲回车键
在HTML里面  不可以直接敲回车键  用<BR>来换行
边框颜色 背景颜色 这个自己试验一下就知道效果  
这个就类似于DZ的大表格套小表格  
比如一个宽度500黑一行一列的表格里面  套一个一行一列490宽的白色表格  
出来的效果就是一个黑色的框架  这个HTML  
运用边框颜色与背景颜色  即可做出这个黑色框架的效果
接下来实例一个


这个效果的具体代码在编辑器里面是以下这段:

  <table style="BORDER-BOTTOM-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted; BORDER-LEFT-STYLE: dotted" border=5 cellSpacing=2 borderColor=#ff0033 cellPadding=5 width=500 bgColor=#ffccd6 align=center height=150>
    <tr>
      <td>
      <P align=center>这个是我实例在编辑器内的预览效果</P></td>
    </tr>
  </table>

这里需要注意一下, 编辑器内的预览效果 到社区论坛会变 所以部分代码需要修改  
把红色部分 width=500  换成 WIDTH:500px 加在style后面的属性内
随便一个位置 如果不把这里修改 发到社区后,就自动变成宽屏的了
这样 就是一个简单的边框了 相同的 把高度 height=150 换成 HEIGHT:150px,
注意全部大写
还需要注意一点,最好手动在第一层边框内加上定位(个人习惯),
POSITION: relative (这个以后会具体再讲一下的,先加上为好)
也加在第一层边框内 这样 修改后的代码就是这样的

<table style="BORDER-BOTTOM-STYLE: dotted; WIDTH:500px; POSITION:relative; HEIGHT:150px; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted; BORDER-LEFT-STYLE: dotted" border=5 cellSpacing=2 borderColor=#ff0033 cellPadding=5 bgColor=#ffccd6 align=center>
    <tr>
      <td>
      <P align=center>这个是我实例在编辑器内的预览效果</P></td>
    </tr>
  </table>


但是我平时不喜欢用这样的 我会用下面的这一段代码 预览效果跟以上是一样的


<TABLE style="BORDER-BOTTOM: #ff0033 5px dotted; POSITION: relative; BORDER-LEFT: #ff0033 5px dotted; WIDTH: 500px; HEIGHT: 150px; BORDER-TOP: #ff00335px dotted; BORDER-RIGHT: #ff0033 5px dotted" border=0 cellSpacing=2  align=center>
<TBODY>
<TR>
<TD>
<P align=center>这个是我实例在编辑器内的预览效果</P>
</TD></TR></TABLE>


这个是我平时比较喜欢用的格式
通俗的说就是一个框 由四个边框组成 把每个边框的颜色 款式 宽度设置一下
加上定位这些 后面的那些边距 间距啥的 都是浮云 不太重要
然后 就可以组成一个边框 这俩代码格式 出来的效果是一样一样的 个人推荐 下面这个格式
现在刚开始 会套用就行了 熟悉了之后 这一个基本的边框 都可以直接写出来的
不用死记硬背 熟悉了之后 自然而然就会写了
再一个需要注意的地方 刚接触HTML 会有乱码的现象出现
就是缺少代码 或者多余的代码 就会造成网页错乱 或者网页显示不正常
遇到这样的情况 就找我嘛  我给你们看哪里出的问题 主要就是缺代码或者多代码的
HTML标签里面 有开始代码 就有结束代码
比如 <TABLE>开始的 结束一定会有一个</TABLE>
但换行<BR> 这个没有结束标签 其他的 大部分都有结束的标签的

边框内加入图片,可以复制代码粘贴在社区 在预览模式下 上传图片 或者直接用代码
<IMG src="图片地址" width=5宽度 height="高度">





来自群组: 爱上学院

评分

参与人数 3威望 +1 金钱 +14 收起 理由
雨后の阳光 + 2 辛苦了
墨舒儿. + 2 茜老师辛苦咯
II.〆慕容。 + 1 + 10 亲爱的辛苦了,么么哒

查看全部评分

签到天数: 1827 天

[LV.Master]伴坛终老

夕颜染梦
幸福:191℃
沙发
 楼主| 发表于 2014-10-10 21:10:03 | 只看该作者
本帖最后由 茜。 于 2014-10-10 21:04 编辑

有教程嘛,就肯定有作业咯撒
刚接触HTML 肯定会一头雾水
只要你有心学习 不懂的问题尽管提出来 大家一起学习呗

本节的作业呢 就是 做一个简单的边框  边框内附加图片或者文字 发布在社区 回复本帖作业链接哈

签到天数: 1827 天

[LV.Master]伴坛终老

夕颜染梦
幸福:191℃
板凳
 楼主| 发表于 2014-10-10 21:10:04 | 只看该作者
本帖最后由 茜。 于 2014-10-10 21:09 编辑

例如:

签到天数: 619 天

[LV.9]以坛为家II

单身中……
帮我摆脱单身吧
地板
发表于 2014-10-10 21:26:18 | 只看该作者
茜。 发表于 2014-10-10 21:10
本帖最后由 茜。 于 2014-10-10 21:09 编辑

例如:

这个俺都等了好久了,这算手把手的教了。
大家抓紧时间带好小板凳了!

签到天数: 47 天

[LV.5]常住居民I

单身中……
帮我摆脱单身吧
5#
发表于 2014-10-10 21:50:24 | 只看该作者
看看一下下!

签到天数: 1007 天

[LV.10]以坛为家III

单身中……
帮我摆脱单身吧
6#
发表于 2014-10-10 22:16:08 | 只看该作者
哎呀呀,这次要把俺难倒咯...超级难

签到天数: 963 天

[LV.10]以坛为家III

单身中……
帮我摆脱单身吧
7#
发表于 2014-10-11 08:49:19 | 只看该作者
我要好好学习,争取天天向上!

签到天数: 1799 天

[LV.Master]伴坛终老

单身中……
帮我摆脱单身吧
8#
发表于 2014-10-13 09:04:09 | 只看该作者
本帖最后由 毛毛雨露 于 2014-10-19 21:44 编辑


【等你的季节---刘诗诗.吴奇隆】
http://www.hdcph.com/thread-371293-1-1.html
(出处: 万博体育app下载网)

签到天数: 47 天

[LV.5]常住居民I

单身中……
帮我摆脱单身吧
9#
发表于 2014-10-19 22:05:20 | 只看该作者
【终有一天我会抛弃你们-兔裹煎蛋卷】- 没关系,就算心碎,我也会站起来。
http://www.hdcph.com/thread-371297-1-1.html
(出处: 万博体育app下载网)

签到天数: 1007 天

[LV.10]以坛为家III

单身中……
帮我摆脱单身吧
10#
发表于 2014-10-19 22:39:02 | 只看该作者
【Mustang Cabriolet Paris Brune -Paris Brune】
http://www.hdcph.com/thread-371298-1-1.html
(出处: 万博体育app下载网)

签到天数: 963 天

[LV.10]以坛为家III

单身中……
帮我摆脱单身吧
11#
发表于 2014-10-22 16:45:54 | 只看该作者
【最好听的音乐-第三十一期】冬之恋歌---邓丽君
http://www.hdcph.com/thread-371834-1-1.html
(出处: 万博体育app下载网)

PS:最近有点懒了,把H码和PS一起做了!

签到天数: 1110 天

[LV.10]以坛为家III

单身中……
帮我摆脱单身吧
12#
发表于 2014-10-25 12:16:45 | 只看该作者
我有空就学学,多学一点东西也好,谢谢

签到天数: 1977 天

[LV.Master]伴坛终老

无欢
幸福:19871℃
13#
发表于 2014-10-27 20:54:32 | 只看该作者
【消失的风景-小爱】
http://www.hdcph.com/thread-372617-1-1.html
(出处: 万博体育app下载网)
交作业咯

签到天数: 1202 天

[LV.10]以坛为家III

单身中……
帮我摆脱单身吧
14#
发表于 2015-1-17 12:50:13 | 只看该作者
来学学代码了,不知道学的会不

签到天数: 933 天

[LV.10]以坛为家III

单身中……
帮我摆脱单身吧
15#
发表于 2015-1-20 08:26:59 | 只看该作者
来学习一下

签到天数: 984 天

[LV.10]以坛为家III

单身中……
帮我摆脱单身吧
16#
发表于 2015-3-7 23:48:45 | 只看该作者
偷师学艺不知可否?

签到天数: 1 天

[LV.1]初来乍到

单身中……
帮我摆脱单身吧
17#
发表于 2015-3-20 12:39:17 | 只看该作者
赞一个,我喜欢

签到天数: 1330 天

[LV.10]以坛为家III

单身中……
帮我摆脱单身吧
18#
发表于 2015-3-20 21:37:16 | 只看该作者
之前学的一些皮毛都忘的差不多了,有空重新再来跟大家学习学习。

签到天数: 1777 天

[LV.Master]伴坛终老

单身中……
帮我摆脱单身吧
19#
发表于 2016-1-3 17:25:45 | 只看该作者
请问楼主HTML在线编辑器操作时提示 请先登录后在使用此功能 那么 在哪登陆呢?

点评

部分功能是使用不了的  发表于 2016-1-4 09:23

本版积分规则

小黑屋|手机版|Archiver|广告合作|万博体育app下载网    
会员言论仅代表个人观点,所有内容由网友自由发布,如侵害你的权益,请联系我们在24小时协助您处理完毕。

GMT+8, 2021-4-5 03:11 , Processed in 0.135493 second(s), 112 queries , Gzip On, Memcache On.

Powered by X3.2

© 2001-2013

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