前端页面常用的css初始化代码

淘宝

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

腾讯

    body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
    body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
    a{color:#2d374b;text-decoration:none}
    a:hover{color:#cd0200;text-decoration:underline}
    em{font-style:normal}
    li{list-style:none}
    img{border:0;vertical-align:middle}
    table{border-collapse:collapse;border-spacing:0}
    p{word-wrap:break-word}

新浪

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} 
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";} 
 
ul,ol{list-style-type:none;} 
select,input,img,select{vertical-align:middle;} 
 
a{text-decoration:none;} 
a:link{color:#009;} 
a:visited{color:#800080;} 
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;} 

网易

    html {overflow-y:scroll;}
    body {margin:0; padding:29px00; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;}
    div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
    table,td,tr,th{font-size:12px;}
    li{list-style-type:none;}
    img{vertical-align:top;border:0;}
    ol,ul {list-style:none;}
    h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;}
    address,cite,code,em,th {font-weight:normal; font-style:normal;}

这是常见的一些css页面初始化,均在网上找到,在此做个笔记。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是一个简单的数据展示大屏的前端页面代码,包括了使用echarts库绘制图表和使用Bootstrap布局: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>数据展示大屏</title> <!-- 引入echarts库 --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <!-- 引入Bootstrap库 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <!-- 标题 --> <div class="row"> <div class="col-md-12"> <h1 class="text-center">数据展示大屏</h1> </div> </div> <!-- 图表1 --> <div class="row"> <div class="col-md-6"> <div id="chart1" style="width: 100%; height: 400px;"></div> </div> <div class="col-md-6"> <div id="chart2" style="width: 100%; height: 400px;"></div> </div> </div> <!-- 图表2 --> <div class="row"> <div class="col-md-12"> <div id="chart3" style="width: 100%; height: 400px;"></div> </div> </div> </div> <script> // 初始化echarts图表1 var chart1 = echarts.init(document.getElementById('chart1')); var option1 = { title : { text: '图表1', x:'center' }, tooltip : { trigger: 'axis' }, legend: { data:['数据1','数据2'] }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'数据1', type:'line', stack: '总量', data:[120, 132, 101, 134, 90, 230, 210] }, { name:'数据2', type:'line', stack: '总量', data:[220, 182, 191, 234, 290, 330, 310] } ] }; chart1.setOption(option1); // 初始化echarts图表2 var chart2 = echarts.init(document.getElementById('chart2')); var option2 = { title : { text: '图表2', x:'center' }, tooltip : { trigger: 'axis' }, legend: { data:['数据1','数据2'] }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'数据1', type:'line', stack: '总量', data:[120, 132, 101, 134, 90, 230, 210] }, { name:'数据2', type:'line', stack: '总量', data:[220, 182, 191, 234, 290, 330, 310] } ] }; chart2.setOption(option2); // 初始化echarts图表3 var chart3 = echarts.init(document.getElementById('chart3')); var option3 = { title : { text: '图表3', x:'center' }, tooltip : { trigger: 'axis' }, legend: { data:['数据1','数据2'] }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'数据1', type:'line', stack: '总量', data:[120, 132, 101, 134, 90, 230, 210] }, { name:'数据2', type:'line', stack: '总量', data:[220, 182, 191, 234, 290, 330, 310] } ] }; chart3.setOption(option3); </script> </body> </html> ``` 以上代码中,通过使用Bootstrap的网格系统和容器,实现了对图表的排版布局。同时,为了绘制图表,使用了echarts库,并且通过JavaScript代码初始化并设置图表的选项。最后,在HTML页面中使用div标签创建了三个占据不同位置的图表。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Triumph-light

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值