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将块级元素转为单元格元素

  • 相关阅读:
    使用 asp.net mvc和 jQuery UI 控件包
    ServiceStack.Redis 使用教程
    HTC T8878刷机手册
    Entity Framework CodeFirst 文章汇集
    2011年Mono发展历程
    日志管理实用程序LogExpert
    使用 NuGet 管理项目库
    WCF 4.0路由服务Routing Service
    精进不休 .NET 4.0 (1) asp.net 4.0 新特性之web.config的改进, ViewStateMode, ClientIDMode, EnablePersistedSelection, 控件的其它一些改进
    精进不休 .NET 4.0 (7) ADO.NET Entity Framework 4.0 新特性
  • 原文地址:https://www.cnblogs.com/qzj-it/p/8453006.html
Copyright © 2011-2022 走看看