成都网站建设设计

将想法与焦点和您一起共享

Web前端入门学习(1)——走进前端世界-创新互联

前端基础知识

创新互联公司专注于企业全网整合营销推广、网站重做改版、隆安网站定制设计、自适应品牌网站建设、成都h5网站建设成都商城网站开发、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为隆安等各大城市提供网站开发制作服务。
  1. 前端开发语言

    HTML(Hypertext Markup Language):超文本标记语言;

    CSS(Cascading Style Sheets):层叠样式表;

    JS(JavaScript):脚本语言。

  2. 样式表:

    行间样式表、内部样式表、外部样式表。

  3. 样式

    样式格式:属性名:属性值;

    常见样式:

    border:1px solid red

    border-width:1px

    border-style:solid

    border-color:red

    常见颜色模式:

    关键字:red yellow blue white...

    rgb:(123,12,44)

    十六进制:#3f3f3f

  4. 盒子边框

    border-top:1px solid red

    border-right:1px solid red

    border-bottom:1px solid red

    border-left:1px solid red

  5. 背景

    background-color

    background-p_w_picpath

    background-repeat:(no-repeat repeat-x repeat-y repeat inherit)

    background-position:(top right bottom left 30px 20px 50% 30% inherit)

    background-p_w_upload:(srcoll fixed inherit)

    background复合:blue url(./a.img) no-repeat 20px 30px fixed;

  6. 文字设置

    font-weight:(normal bold bolder lighter 100~900(normal:400,blod:700) inherit)

    font-style:(normal italic oblique inherit)

    font-size:字体大小

    line-height:行高

    font-family:元素字体

    font复合:font-style font-weight font-size/line-hight font-family

  7. 文本设置

    color

    text-align

    text-indent

    text-decoration

    letter-spacing

    word-spacing

    white-space:(normal pre nowrap pre-wrap pre-line inherit)

  8. 超链接

    a:link 未访问过的链接;

    a:visited 已访问过的链接;

    a:hover 鼠标放在链接上时;

    a:active 链接被点击的那一刻;

    规则:a:hover必须放在a:link和a:visited后面,a:active 必须放在a:hover后面。

    download下载:点击下载href指定的地址内容。

    target:_blank _self _parent _topfilename

    base标签:在头部为页面上所有链接规定默认目标。

    Web前端入门学习(1)——走进前端世界 此处仅作了解,后篇文章会深入讲解。

  9. padding填充

    padding-top padding-rihgt padding-bottom padding-left

    padding:15px 20px 18px 25px

    上填充:15px

    右填充:20px

    下填充:18px

    左填充:25px

    padding:10px 20px 15px

    上填充:10px

    左右填充:20px

    下填充:15px

    padding:20px 15px

    上下填充:20px

    左右填充:15px

    Web前端入门学习(1)——走进前端世界 填充(内边距):相当于给盒子填充了厚度,会影响盒子的大小。

  10. margin外边距

    margin-top margin-rihgt margin-bottom margin-left

    margin:15px 20px 18px 25px

    上边距:15px

    右边距:20px

    下边距:18px

    左边距:25px

    padding:10px 20px 15px

    上边距:10px

    左右边距:20px

    下边距:15px

    padding:20px 15px

    上下边距:20px

    左右边距:15px

    padding:100px auto 0px

    上边距:100px

    左右边距:居中

    下边距:0px

  11. 盒子模型

    盒子大小:边距、边框、填充、内容。

    盒子宽度:margin-left + border-left + padding-left + width + padding-right + border-right + margin-right;

    盒子高度:margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom;

Web前端入门学习(1)——走进前端世界

创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。


文章题目:Web前端入门学习(1)——走进前端世界-创新互联
文章路径:http://chengdu.cdxwcx.cn/article/dodhpe.html