html5 フロントエンド開発ノート-Personal Center_html/css

html5 フロントエンド開発ノート-Personal Center_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:32:01

オリジナル

1367 人が閲覧しました

簡易 CSS アダプティブ
PC 側
***

モバイル側

***

最初のアイデアは、モバイル APP ページのレイアウトを模倣することでした。ヘッダー、次にテーマ部分、そして編集とログアウトという 2 つのボタンを追加します。まず基本的な構造をレイアウトします。
コードは以下の通りです

<!DOCTYPE html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0,minimun-sacle=1.0"><meta http-equiv="Cache-Control" content="no-siteapp"><meta http-equiv="Cache-C ontrol" content="no-transform"><link rel="stylesheet" href="style.css"><title>个人中心</title></head><body><header>    <p>个人中心</p> </header>    <div class="content">    <div class="detail">        [站外图片上传中……(1)]                          <ul class="block">            <li>姓名：</li>            <li>性别：</li>            <li>手机：</li>            <li>学校：</li>            <li>个人简介：这个地方文字超出范围之外会自动把容器div撑开，注意不是中文字符的话  需要加CCS属性word-wrap:break-word，这是CCS3的属性。</li>                                    </ul>                       </div><div class="edit">    <a href="###">编辑</a></div><div class="login-out">    <a href="###">退出</a></div><footer>    </footer></body>

ログイン後にコピー

流体レイアウトを使用するため、このステートメントをhead部分に追加する必要があります

<meta name="viewport" content="width=device-width,  initial-scale=1.0,user-scalable=0,maximum-scale=1.0,minimun-sacle=1.0">  //声明宽度等于设备宽度，禁止用户缩放<meta http-equiv="Cache-Control" content="no-siteapp">//禁止百度转码<meta http-equiv="Cache-Control" content="no-transform">//禁止百度转码

ログイン後にコピー

このときの効果は以下の通りです

headの場合:
必要なもの行うべきことは、テキストを中央に配置することです。その方法は、テキストを p タグでマークし、text-align を設定して水平方向の中央に配置し、line-height を調整して垂直方向の中央に配置し、背景色を指定します。ここでは em 単位 (1em=16px) を使用します。これは、スケーリングを計算するときに便利です。全体の色合わせの考え方はベースカラーをベースに、各パーツにベタ縁を設定してフラット感を出しました。

CSS コードは次のとおりです:

header{width: 100%;height: 3em;background-color: #00A2CA;}header p{text-align: center;line-height:3em;}

ログイン後にコピー

Body:
まず第一に、マージンをクリアする必要があります。つまり、ボディのマージンとパディングは両方ともゼロです。
その後、本体はコンテナ div で囲まれます（内容）以前の非常に古い書き方です。もちろん、これなしでも大丈夫です。次に個人情報の部分ですが、ここがポイントですが、アバターを固定したときにアバターの div と情報の div を同一線上に置く方法です。フローティングやポジショニングを使用すると、個人情報が多すぎると div コンテナを超えてしまいます。このとき、詳細の heig を auto に設定すると、開くことができないため無効になります。その理由は、フローティングと配置の両方によって要素がドキュメントフローから外れてしまうためです。相対的な位置関係という 1 つのケースを除いて。
解決策は以下の通りです:
UL個人情報部分:display:inline-block
imgをブロックしないようにmargin-leftを調整すると、imgをフローティングまたは配置することができます。重要なことは、ul がコンテナ内にあることを確認することです。
さらに、ing は拡大縮小できません。固定の幅と高さを設定するだけです。

完全な CSS コードは次のとおりです:

@charset "utf-8";body{margin: 0;padding: 0;background-color: #EEEEEE;font-family: 微软雅黑;}ul{list-style: none;margin: 0 0 0 7.5em;padding: 0;}header{width: 100%;height: 3em;background-color: #00A2CA;}header p{text-align: center;line-height:3em;}.content{width: 100%;background-color: #EEEEEE;}.detail{background-color: #FFFFFF;height: auto;margin-top:1em; padding: 10px;position: relative;}.edit{background-color: #FFFFFF;height: 2em;width: 100%;margin-top:1em;clear: both;}.login-out{background-color: #FFFFFF;height: 2em;width: 100%;margin-top:0.1em;margin-bottom: 0.5em;}.footer{width: 100%;height:2em;background-color: rgb(75,75,75);}img{width: 100%;height: 100%;height: 7em;width: 7em;border: 1px solid grey;position: absolute;top: 0.5em;left: 0.5em;}a{text-decoration: none;display: inline-block;height: 2em;text-align: center;width: 100%;line-height: 2em;color: black;}.block{display: inline-block;height: auto;word-wrap:break-word;width: 50%;}

ログイン後にコピー