01 开篇 Html页面设计和布局 index.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>StarTrackr !</title><link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon"/><meta name="viewport" content="width=device-width"/><link rel="stylesheet" href="./css/base.css"/><!--<link rel="stylesheet" href="../.....
一、什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。 随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些...
基于浮动的布局 基于浮动的布局是最容易使用，也是最可靠的，只需要设置元素的宽度，然后设置为左或者右浮动即可。1.两列浮动布局假设页面总的宽度920px，两个元素间距20px。（display:inline 防止IE双外边距浮动产生的bug）；由于元素是浮动的，将不再文档流中占据空间，将父节点 overflow:hidden;css代码：.right {width: 650px;padding-left: 10px;float: right;display: inline; }.left {width: 230px;float: left;display: in...
存在一个问题就是当屏幕缩小至一定宽度的时候，边框栏会被挤开1body {2 font-family: ‘Amarante‘, cursive;3 background: url(http://www.w3cplus.com/sites/default/files/bg_body.png) repeat;5 }6 7.wrapper {8 margin: 0 auto; 9 } 11.header-wrapper{ 12 background-color: #BD9C8C; 13 } 15.header { 16 width: 80%; 17 background-color: #BD9C8C; 18 margin: 0 auto; 19 margin-bottom: 5px; 20 text-align: ce...
前几天看到我们的UI稿，要实现左侧固定树结构，右侧自适应。想着自己写过几次但是每次都会忘记，在这里做个笔记。第一种方法：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><style>#wrap{display: table;width: 100%;}#wrap>div{display: table-cell;height: 800px;}#sidebar{width: 200px;background: red;}#conte...
一、盒子模型： 整体的宽=margin-left（right）+padding-left（right）+border+content整体的高=margin-top（bottom）+padding-top（bottom）+border+content二、页面布局：（1）标准流：按照原先格式排版块儿元素等一些格式，所有块儿都是按照竖排排列，自占一排。（2）浮动流：给div标签加上float属性，是指按照属性来排列。若想让所给的块儿元素按照横行排列，需要给每个div元素均添加float：left（right）属性。（3）每个对象都...
1.css中的Media Query（媒介查询）： 设备宽高： device-width，device-height 渲染窗口的宽和高：width，height 设备手持方向：orientation 设备的分辨率：resolution2.使用方法： 外联 内嵌样式<!doctype html><html><head><meta charset="UTF-8"><title>js事件测试</title><link rel="stylesheet" href="js.css" type="text/css" media="only screen and (max-width:640px)"></head> <style> @media sc...
在群里无意看到了盆友想要布局一个图文环绕的布局，问有没有什么办法实现，上网查了下，都感觉忽悠人的。js 方面学的不怎么好，但是页面这块是不服输的。于是就进行了研究，需求如下：起先看到这张需求我是有点无奈的，想到了各种css3的方法 旋转、转换 、定位等等等等最后做成了这样:最后做成了这样，明显是达不到需求的，于是想到了一个属性:IFrame HTML 的内联框架这个框架就能完美的实现这个需求了，<!DOCTYPE html><html><hea...
一、列表<ol> 无序列表 （每项前有.）<ul> 有序列表 （每项前有编号1,，2，3）<li> 列表项 1<ul type="square"> 2<li>苹果</li> 3<li>橘子</li> 4<li>香蕉</li> 5</ul> 6<ol type="i" start=10> 7<li>苹果</li> 8<li>橘子</li> 9<li>香蕉</li>10</ol>1,无序列表标签：<ul> <li>属性：disc 实体圆circle 空心圆square 方块实体2,有序列表标签：<ol> <li>属性： A a I i start3,嵌套列表 <ul type="square"><li>宠物<...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">body,div{margin:0;padding:0;}#main{border:1px solid blue;width:500px;height:500px;margin:100px auto;position:rel...
1. 以小米商城为例2. 以淘宝猜你喜欢为例 逐行分析，每行元素定宽高，精确文字自适应适配器定好单个再复制 初始css配置* {padding : 0px;margin : 0px; }ul {list-style : none; }a {text-decoration : none;color : #000; } 具体分析1. 小米商城 2. 淘宝 原文：https://www.cnblogs.com/remix777/p/15270542.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>header/footer</title> <style type="text/css"> body{height: 708px} header{background: red;width: 100%;height: 10%} footer{background: red;width: 100%;height: 10%} #div0{width: 100%;height: 80%} #div1{width: 20%;height: 100%;float: left;background: #f0f0f0} #div2{width: 80%;height: ...
前言 我们在手机上布局一般是这个样子的：其中头部对整个mobile的设计至关重要，而且坑也很多：① 一般来说整个header是以fixed布局，fixed这个产物在移动端来说本身坑就非常多② 在Hybrid应用中，Header很多时候扮演了不一样的角色，首先要完成以webview(window)为容器的功能，又要调用native提供的接口Hybrid中Header的实现往往是一个难点，主要原因是同一套接口，要保证H5站点与native处于不一样的环境调用相同的接口，完成不同...
atitit.软件开发GUI 布局管理优缺点总结java swing wpf web html c++ qt php asp.net winform 1. Absoluti 布局（经常使用） 12. Flow 布局（不经常使用） 13. BorderLayout （不经常使用） 14. BoxLayout（ html默认布局） 25. CardLayout （tab 布局） 26. GridLayout 37. GridBagLayout 38. Fixed 定位（不经常使用） 3 1. Absoluti 布局（经常使用）Html中要把div 属性设置成absoluti.net 的默认布局C++ qt的默认布局简单方便...
<html><head><title>div+css页面布局</title><meta http-equiv="content-type" content="text/html" ><link rel="stylesheet" type="text/css" href="css/layout.css" /></head><body><div id="container"><div id="head"> <div id="logo"> </div> <div id="banner"> </div> <div id="tool"> </div> <div class="nav"> </div> <div id="menu"> <ul> <li><a href="#">公司概况</a></li> <li class="tiao"></li> ...