zoukankan      html  css  js  c++  java
  • 网页设计学习笔记(1)

    3 添加标题图片

    首先,要加入图标,需要.ico格式的图片才可以。

    可以在:http://www.bitbug.net/    这里上传图片,制成.ico格式的文件。

    然后在html的<head>标签中插入:

      <link rel="shortcut icon" href="WEB-INF/favicon.ico" type="image/x-icon"/>  

    若插入之后不显示,重启浏览器即可。

    4 多行文本框、单复选框和下拉框

    多行文本框后面可直接加一个required表示其必须填写,placeholder预设内容

    <textarea rows="3" cols="20" placeholder="请介绍自己...">

        网站建设教程。

    </textarea>

    单选和复选类似:

    <label><input type="radio" name="indoor-outdoor" checked</label>

    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>

    <label><input type="checkbox" name="personality" checked</label>

    <label><input type="checkbox" name="personality"> Lazy</label>

    <label><input type="checkbox" name="personality"> Energetic</label>

    下拉框例子:

    例如:  <select class="form-control" id="numbers">

                  <option value="1">数字1</option>

                  <option value="2" selected>数字2</option>

            </select>

    $("#numbers option:selected").val();   获取到下拉框被选中的optionde value值:2;

    $("#numbers option:selected").text();   获取到下拉框被选中的optionde 文本内容:数字2; 

    可以不加label标签,添加一个value属性设置默认值

    5 css样式覆盖及常识

    !impotant>内联>Id>class>链接

    例如:color: pink !important;

    不用16进制设定颜色:background-color: rgb(0, 255, 0);

    如果需要设置透明度则(0-1,越小透明度越高):background-color: rgba(0, 255, 0,0.2);

    设置图片或边框圆角度(50以上即为圆):border-radius: 50%;

    6 bootstrap小技巧

    自带的class属性img-responsive可以使太大的图片正好适应屏幕。

    其它简单学习bootstrap方法地址:

    https://www.w3cschool.cn/codecamp/list?pename=responsive_design_with_bootstrap_camp

    7 单元格之间消除空隙

    (1)

    <style>

    table{ border-collapse:collapse; }

    <style>

    (2)
    <table border="0" cellspacing="0" cellpadding="0">
    <!—cellpadding可以理解为使单元格四周变大-->

    .8 图片和文字居中

    左右居中方法:

    <div style="500px;text-align:center;">
    <img src="" width="300" style="display:block;margin:0 auto;"/>sdf
    </div>

    上下居中方法:

    可以先用行高把文字上下居中再用

    vertical-align: middle;把图片和文字垂直居中显示

    如果没用可在后面加个!import或者在适当的位置加上display:table-cell将块级元素转为单元格元素

  • 相关阅读:
    poj 2253
    POJ 3273
    python基本运算符
    python基本数据类型以及常量变量
    pycharm的快捷键
    计算机基础
    day100 scrapy请求传参 中间件 去重规则 分布式爬虫
    day99 爬虫 scrapy介绍 结构介绍
    day98 爬虫 selenium
    day97 爬虫bs4
  • 原文地址:https://www.cnblogs.com/qzj-it/p/8453006.html
Copyright © 2011-2022 走看看