爱学记
divcss甯冨眬缁忓吀瀹炰緥 div + css 甯冨眬鐨勫浘鐗囥€傚�備綍璁╀粬鍦ㄤ笉鍚岀殑鏄剧ず鍣ㄤ笅浣嶇疆閮借兘鐩稿�逛笉鍙橈紵
div + css 甯冨眬鐨勫浘鐗囥€傚�備綍璁╀粬鍦ㄤ笉鍚岀殑鏄剧ず鍣ㄤ笅浣嶇疆閮借兘鐩稿�逛笉鍙橈紵聽聽
div + css 甯冨眬鐨勫浘鐗囥€傚�備綍璁╀粬鍦ㄤ笉鍚岀殑鏄剧ず鍣ㄤ笅浣嶇疆閮借兘鐩稿�逛笉鍙橈紵
棰樹富锛屼綘鐨勬剰鎬濇槸涓嶆槸鑷�閫傚簲甯冨眬涔熷氨鏄�鍝嶅簲寮忥紵
鏂规硶濡備笅锛�
鍦╤ead閮ㄥ垎鍔犲叆涓€鏉�meta鏍囩�撅細
<meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no"> 杩欐潯鏉ヤ娇浣犵殑椤甸潰浠ヨ�嗙獥澶у皬鏉ュ竷缃�锛屽悓鏃朵篃鏄�鍩烘湰閰嶇疆銆�
2.鎵€鏈夐渶瑕佽�勫畾瀹藉拰闀跨殑鍏冪礌鎶婂師鏉ョ殑px鐢荤礌鍗曚綅鎹㈡垚鑷�閫傚簲鐨剅em锛宔m 鎴栬€呯櫨鍒嗘瘮锛堟帹鑽愬墠淇╀釜浣跨敤锛�
3.涓婇潰淇╀釜閮借皟濂戒簡鐨勮瘽锛屼綘鍙�浠ョ敤娴忚�堝櫒鐨勯櫎閿欏姛鑳斤紙f12锛夋潵鐪嬩竴涓嬫晥鏋溿€傞渶瑕佽皟鏁寸殑鍦版柟灏辩敤闄ら敊鍔熻兘璋冧竴璋冦€�
emmm锛屼綘瑕佹槸鍒氭帴瑙︾殑璇濓紝寤鸿��浣犲彲浠ュ厛瀛︿竴涓媌ootstrap锛岃繖涓�瀵规柊鎵嬭繕铔�涓嶉敊鐨勩€�
绾�鎵嬫墦锛屾眰閲囩撼銆�
濡備綍璁╃綉椤靛湪涓嶅悓鐨勬樉绀哄櫒涓嬬綉椤电殑鏄剧ず閮芥槸鍏ㄥ睆 鐢ㄧ殑鏄疍IV+CSS甯屾湜鐗涗汉鎸囧�间笅...
涓嶄粎鏈変笉鍚屾樉绀哄櫒锛屽彲浠ヨ�惧畾div鐨剋idth璁惧畾100% 锛屾渶濂芥槸鎵€鏈夌殑width璁惧畾閮戒互鐧惧垎鏁拌�惧畾锛屼笉鐒朵細鍙樺舰 锛岃繕瑕佽€冭檻涓嶅悓娴忚�堝櫒锛岄偅灏遍毦浜嗭紝姣忎釜鏂归潰閮借�佹兂鍒�
鍥剧墖鍦ㄤ笉鍚岀殑鏄剧ず鍣ㄤ笂鏄剧ず涓嶅悓鍜屽浘鐗囨湰韬�鏈夊叧绯诲悧?
鍚屾牱鐨勫浘鐗囧啀涓嶅悓鐨勬樉绀哄櫒涓婃樉绀轰笉鍚岋紝鍜屽浘鐗囨湰韬�鏄�娌″叧绯荤殑锛�
涓や釜涓嶅悓鐨勬樉绀哄櫒鏄剧ず鐨勫浘鐗囬�滆壊涓嶄竴鑷�
灏辩畻鏄�涓や釜鐩稿悓鐨勬樉绀哄櫒锛岃皟鐨勫�规瘮搴﹀拰浜�搴﹂兘鏄�涓€鏍凤紝涔熶笉涓€瀹氬氨涓€鑷淬€傚厛鐪嬩竴涓嬫樉绀哄櫒鐨勮壊娓╋紝璋冩垚涓€鑷寸殑銆傜劧鍚庡啀璋冨�规瘮搴︺€佷寒搴︺€備寒鐨勮皟鏆楃偣锛屾殫鐨勮皟浜�鐐瑰氨鍙�浠ヤ簡銆� 鍦ㄦ樉绀哄櫒鐨勯€夊崟閲岄潰锛屾殩鑹茶皟 6500k 鍐疯壊璋�9300k 鎶婁袱涓�鏄剧ず鍣ㄨ皟鎴愪竴鑷淬€�
甯冨眬鐑︼細濡備綍璁﹖d涓�鍥剧墖涓嶆崲琛�(div+css)
<!DOCTYPE PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" ":w3./TR/x1/DTD/x1-transitional.dtd">
< xmlns=":w3./1999/x">
<head>
<meta -equiv="Content-Type" content="text/; charset=gb2312" />
<title>鏃犳爣棰樻枃浠�</title>
<style>
*
{
margin:0;
padding:0;
}
ul,li
{
list-style-type:none;
}
img
{
border:0;
}
li
{
float:left;
display:inline;
width:120px;
text-align:center;
}
img
{
width:100px;
height:30px;
}
</style>
</head>
<body>
<table width=800 border=0 cellspacing="0" cellpadding="0">
<tr>
<td>绗�涓€涓�鍗曞厓鏍�</td>
<td>绗�浜屼釜鍗曞厓鏍�</td>
<td>绗�涓変釜鍗曞厓鏍�</td>
<td>绗�鍥涗釜鍗曞厓鏍�</td>
<td>绗�浜斾釜鍗曞厓鏍�</td>
</tr>
<tr>
<td>绗�浜岃�岀��涓€涓�</td>
<td colspan="4">
<div>
<ul>
<li><a href="#"><img src=:img.baidu./img/logo-zhidao.gif /></a></li>
<li><a href="#"><img src=:img.baidu./img/logo-zhidao.gif /></a></li>
<li><a href="#"><img src=:img.baidu./img/logo-zhidao.gif /></a></li>
<li><a href="#"><img src=:img.baidu./img/logo-zhidao.gif /></a></li>
<li><a href="#"><img src=:img.baidu./img/logo-zhidao.gif /></a></li>
</ul>
</div>
</td>
</tr>
</table>
</body>
</>
浣犲�嶅埗鐪嬬湅鏁堟灉鍚э紝涓嶇煡閬撴槸涓嶆槸浣犻渶瑕佺殑鏁堟灉
DIV+CSS甯冨眬鐨勭綉椤靛湪涓嶅悓鏈哄瓙涓婄敤IE寮€鍚�鍚庢樉绀轰笉鐩稿悓闂�棰�
鍙�鑳芥槸娴忚�堝櫒涓嶇浉瀹圭殑闂�棰�
涔熸湁鍙�鑳芥槸缃戦〉瑙ｆ瀽搴︾殑闂�棰�
浣犳祴璇曞嚑鍙扮數鑴戯紝娌℃湁璇存槑娴忚�堝櫒锛屼竴鑸�灏辨槸缃戦〉瑙ｆ瀽搴︾殑闂�棰�
娴忚�堝櫒涓嶅悓鐪嬬殑缁撴灉涓嶅悓锛岄偅灏辨槸css涓嶇浉瀹圭殑闂�棰樹簡
灏ゅ叾鏄痠e6
缃戦〉濡備綍璁╁瓙DIV鍦ㄧ埗DIV鐨勭浉瀵逛綅缃�鏄剧ず锛岀埗DIV浣嶇疆涓嶆槸鍥哄畾鐨�
<div > <div ></div></div>鐖禿iv鐢ㄧ粷瀵瑰畾浣峱osition: absolute锛屽瓙div鐢ㄧ浉瀵瑰畾浣嶅氨琛屼簡position: relative锛岄渶瑕佸埗瀹氭樉绀哄湪鐖禿iv鐨勫摢閲岋紝鍙�浠ョ敤:10px聽 聽 left:10px 鎴栬€呯櫨鍒嗘瘮鏉ョ‘瀹氫綅缃�Android鐩稿�瑰竷灞€:鐩稿�逛綅缃�鏄剧ず涓嶆�ｅ父
鐩稿�瑰竷灞€瑕佹瘮鍓嶉潰璁茬殑绾挎€у竷灞€鍜岃〃鏍煎竷灞€瑕佺伒娲讳竴浜涳紝鎵€浠ュ钩甯哥敤寰椾篃鏄�姣旇緝澶氱殑銆傜浉瀵瑰竷灞€鎺у埗鍏冧欢鐨勪綅缃�鏄�涓庡叾鍛ㄥ洿鎺у埗鍏冧欢鐨勪綅缃�鐩稿叧鐨勶紝浠庡悕瀛楀彲浠ョ湅鍑烘潵锛岃繖浜涗綅缃�閮芥槸鐩稿�圭殑锛岀‘瀹氬嚭浜嗗叾涓�涓€涓�鎺у埗鍏冧欢鐨勪綅缃�灏卞彲浠ョ‘瀹氬彟涓€涓�鎺у埗鍏冧欢鐨勪綅缃�浜嗐€�
鏈�娆″疄楠屽氨鏄�鏄剧ず濡備笅鐨刟ctivity锛�
鍏朵腑鍙�鏈�2涓猙utton锛�1涓猼extview锛�1涓猠dittext銆�
鍦ㄧ浉瀵瑰竷灞€涓�锛屼竴鑸�鐢ㄥ埌鐨勬帶鍒跺厓浠跺睘鎬цВ閲婂�備笅锛�
鍦ㄧ浉瀵瑰竷灞€涓�鏈夊�備笅灞炴€э紝瑙ｉ噴濡備笅锛�
android:layout_above 涓哄皢璇ユ帶鍒跺厓浠剁殑搴曢儴鏀惧湪鎸囧畾id鎺у埗鍏冧欢鐨勪笂鏂�
android:layout_below 鍚岀悊绫讳技锛屽皢璇ユ帶鍒跺厓浠剁殑椤堕儴鏀惧湪鎸囧畾id鎺у埗鍏冧欢鐨勪笅鏂�
android:layout_toLeftOf 灏嗚�ユ帶鍒跺厓浠剁殑鍙崇��绱ф尐鐫€鏀惧湪鎸囧畾id鎺у埗鍏冧欢鐨勫乏绔�銆�
android:layout_toRightOf 灏嗚�ユ帶鍒跺厓浠剁殑宸︾��绱ф尐鐫€鏀惧湪鎸囧畾id鎺у埗鍏冧欢鐨勫彸绔�
android:layout_alignParentRight 涓簍rue鏃跺皢璇ユ帶鍒跺厓浠跺彸绔�涓庣埗鎺у埗鍏冧欢鍙崇��瀵归綈
android:layout_alignParentLeft 涓簍rue鏃跺皢璇ユ帶鍒跺厓浠跺乏绔�涓庣埗鎺у埗鍏冧欢宸︾��瀵归綈
android:layout_alignParentTop 涓簍rue鏃跺皢璇ユ帶鍒跺厓浠堕《绔�涓庣埗鎺у埗鍏冧欢椤剁��瀵归綈
android:layout_alignParentBottom 涓簍rue鏃跺皢璇ユ帶鍒跺厓浠跺簳绔�涓庣埗鎺у埗鍏冧欢搴曠��瀵归綈
android:layout_alignBottom 灏嗚�ユ帶鍒跺厓浠跺簳閮ㄤ笌鎸囧畾id鎺у埗鍏冧欢搴曢儴鎺у埗鍏冧欢瀵归綈
android:layout_alignLeft 灏嗚�ユ帶鍒跺厓浠跺乏杈逛笌鎸囧畾id鎺у埗鍏冧欢宸﹁竟瀵归綈
android:layout_alignRight 灏嗚�ユ帶鍒跺厓浠跺彸杈逛笌鎸囧畾id鎺у埗鍏冧欢鍙宠竟瀵归綈
android:layout_alignTop 灏嗚�ユ帶鍒跺厓浠堕《绔�涓庢寚瀹歩d鎺у埗鍏冧欢椤剁��瀵归綈
瀹炵幇涓婇潰activity姣旇緝绠€鍗曪紝鍏秞ml绋嬪紡鐮佸�備笅锛�
澶嶅埗绋嬪紡鐮佺▼寮忕爜濡備笅:
<RelativeLayout xmlns:android=":schemas.android./apk/res/android"
xmlns:tools=":schemas.android./tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10px" >
<TextView
android:id="@+id/input"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/input_dis"
tools:context=".MainActivity" />
<EditText
android:id="@+id/edit"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/input"
android:background="@android:drawable/editbox_background"
/>
<Button
android:id="@+id/ok"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="@id/edit"
android:layout_alignParentRight="true"
android:layout_marginLeft="10px"
android:text="@string/ok"
/>
<Button
android:id="@+id/cancel"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="@id/edit"
android:layout_toLeftOf="@id/ok"
android:text="@string/cancel"
/>
</RelativeLayout>
鎬荤粨锛歛ctivity鐨勭浉瀵瑰竷灞€姣旇緝鐏垫椿锛屼竴浜涘父瑙佺殑灞炴€т篃姣旇緝澶氾紝鐢ㄥ緱澶氳嚜鐒跺氨浼氫簡銆�
浠ヤ笅鍥剧墖甯冨眬鐨凜SS鏍峰紡搴旇�ュ�備綍鍐�? 涓轰簡鍑忓皯绋嬪紡鐮�,鎯崇敤CSS鏉ュ竷灞€浠ヤ笅鍥剧墖鍐呭�圭殑鏄剧ず鏂瑰紡
杩欐牱椤甸潰浣犲氨鏄�浠樿垂涔熻�佺櫨鍗佸揩浜哄�舵墠浼氱粰浣犲紕
浣犱竴鍒嗕笉鍑� 鎴戠湅搴旇�ユ病浜轰細閭ｄ箞闂诧紒
div+css甯冨眬 璁惧畾鐨勮儗鏅�鍥剧墖鏄剧ず涓嶅嚭鏉�
杩欐槸鍥犱负鍦╥ 銆乴i 銆乤杩欎簺鏍囩�句腑鏂板�炶儗鏅�鏃堕兘闇€瑕佺粰涓€涓�瀹介珮锛屾垨鑰卍isplay锛歜lock銆傝�╀粬鎴愪负鍧楀厓绱犮€傚惁鍒欎粬娌℃湁瀹介珮銆傚彧鏈変竴鏉＄嚎鎴栬€呬竴涓�鐐归偅涔堝ぇ鎬庝箞鏄剧ず鑳屾櫙鍟�
微信收款码
支付宝收款码