响应式页面简单例子1后台游戏显示记录界面

最新推荐文章于 2022-03-30 10:05:45 发布

帅锅打酱油

最新推荐文章于 2022-03-30 10:05:45 发布

阅读量305

点赞数

分类专栏：响应式布局文章标签：自适应的两部分超链接的使用响应式布局的格式让文字居中

本文链接：https://blog.csdn.net/qq_41915456/article/details/80016112

版权

响应式布局专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我用的是谷歌浏览器，因为它可以模拟手机页面；谷歌

浏览器右上角-------更多工具--开发者工具

在Responsive中选择手机型号。模拟手机上界面

做出如下界面1:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="yejiye.aspx.cs" Inherits="game1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, 
                                     user-scalable=no"/>
     <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"/>  
   <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title></title>
    <style>
        #header {
            background-color:dodgerblue;}
        #top_content {
            background-color:dodgerblue;
            margin-top:1%;
            border-bottom:solid;
            border:1px solid green;
            text-align:center;
            padding:1%;}
        #left_content{ float:left;
                        width:50%;
                        padding-top:1%;
                        border: 1px solid green;
                  text-align:center; }     
        #right_content{ float:left;
                        width:49%;
                        padding-top:1%;
                        border: 1px solid green;
                      text-align:center;}
       .username,.idcord,.yj{color:white;}
        #l1, #l2, #l3 {
            background-color:dodgerblue;
            margin-top:3%;
            text-align:center;
            padding:1%;
        }
       a:link {
      color:white;
    text-decoration:none;
    }
 a:visited{
      color:#ff0000; }
 a:hover {color:black;}   
 a:active {color:crimson;}      
    </style>
</head>
   
<body>
    <form id="form1" runat="server" role="form">
       
        <div>
            <div id="header">
                <span class="username">。。。。</span>
                <br />
                <span class="idcord">ID:。。。。</span>
            </div>
            <div id="content">
                <div id="top_content">
                <span class="yj">总业绩：。。。。</span>
                </div>
                <div class="row"> 
                   <div  id="left_content" class="col-md-6">直属会员个数<br />。。。</div> 
                   <div  id="right_content" class="col-md-6">总业绩<br />。。。。。</div> 
</div>
              <br />
            <p>***注：业绩=会员每次游戏中的输赢金额</p>
            <div id="l1"><a class="l11" href="#">直属会员列表：</a></div>
            <div id="l2"><a class="l11" href="#">我的游戏记录</a></div>
            <div id="l3"><a class="l11" href="#">我的业绩详情</a></div>  
     </div>        
    </form>
</body>
</html>

注意事项：

1.响应式布局必备链接写在头文件中

2.高度不能写具体的数值，写百分比

3.文本居中 text-align:center;

4.超链接顺序必须是

a:link {
      color:white;
    text-decoration:none;
    }//正常是白色
a:visited{
      color：blue; }//链接完后显示蓝色
a:hover {color:black;}   鼠标放上去是黑色
a:active {color:red;} //点上去是红色

<div class="row">
<div id="left_content" class="col-md-6">直属会员个数<br />。。。</div>
<div id="right_content" class="col-md-6">总业绩<br />。。。。。</div>
</div>///网格布局分成两部分

帅锅打酱油

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式页面简单例子1后台游戏显示记录界面

我用的是谷歌浏览器，因为它可以模拟手机页面；谷歌浏览器右上角-------更多工具--开发者工具在Responsive中选择手机型号。模拟手机上界面做出如下界面1:&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="yejiye.aspx.cs" Inherits="game1.WebForm1" %&gt;&lt;!DOC...
复制链接

扫一扫

专栏目录