ホームページ > 記事 > ウェブフロントエンド > モバイル Web ページの開発方法_html/css_WEB-ITnose
モバイル Web ページの開発方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:48:041231ブラウズ
写真のように、現在の主流の携帯電話に適した Web ページを作成したいのですが、どのように実装すればよいでしょうか。主に、Weibo ログインと QQ ログインの 2 つのボタンを実装する方法がわかりません。
ディスカッションに返信（解決策）
WeiboログインとQQログインの2つのボタンを実装する方法がわかりません。
CSSを使用してaタグを追加し、ボタンとしてシミュレートします
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Script-Type" content="text/javascript"><meta http-equiv="Content-type" content="text/html;charest=UTF-8"><title></title><style type="text/css">#login{position: relative;}.weibo{margin:0px 30px;}span.aaa{ position: absolute; right:10px; top:50%; width:20px; height:20px; margin-top:-10px;}span.aaa em, span.aaa i{ position: absolute; left: 5px; border-color: rgba(255,255,255,0); border-style: solid; border-width: 10px 0 10px 10px; border-left-color: #aaa;}span.aaa i{ left:0; border-left-color: #FFF;}</style></head><body><div id="login"> <div class = "weibo">微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆微博登陆</div><span class = "aaa"><em></em><i></i></span></div></body></html> Weiboのログインセクションを自分で変更できるはずです。
左側の Weibo 写真については、.weibo クラスに背景を追加して、左側の背景を作成するだけです。
あなたのメールアドレスは何ですか?ここに例がありますので、お送りします
あなたのメールアドレスは何ですか?ここに例がありますので、お送りします
crytoll@163.com
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。