ホームページ > 記事 > ウェブフロントエンド > 全アセット 70 点 div+css ヘルプ問題_html/css_WEB-ITnose
全アセット 70 点 div+css ヘルプ問題_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:17:001065ブラウズ
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="top.aspx.cs" Inherits="top" %><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script type="text/jscript" src="jsinc/MdiWin.js"></script><title>top</title> <style type="text/css"> .all { left :0px; top: 0px; height: 66px; width: 100%; } #imglogo { left :0px; top: 0px; height: 66px; width: 213px; } </style></head><form id="top" runat="server"><body><div class="all" > <div id="imglogo"><img alt="logo" src="images/logo.jpg" /></div></div></body></form></html> 表示効果は次のとおりです
これで div ができました
内容は次のとおりです:
<div> <a href="#" target="_blank" >反馈建议</a> | <a href="">帮助中心</a> | <a href="#" >退出</a></div>
class="all" の div の右上隅に表示され、ウィンドウに関係なく表示されます変更すると、この div は古いものになります 右上隅に、これをどのように書けばよいでしょうか?
実現したい効果はこんな感じです
ディスカッション（解決策）への返信
.all {position:fixed}
all divの右上隅に表示したい場合は絶対配置を使用してくださいすべての div を相対または絶対として定義し、右上隅の div を絶対に設定してから、上部と右側の値を設定します。
アドレスは指定しないでください。私が望むのは、ウィンドウがどのように変化しても、div が常に右上隅にあるようにすることです。この場所は位置決めにのみ使用されます。したがって、絶対位置を使用する場合は、position: を使用して設定します。絶対配置を使用したくない場合は、float to float を使用してください。左上を設定する必要はありません
完全なコードは次のとおりです:
7fcaf560f575271235d1624fc20918a7
ef0c2772b76bfffb9337fc47aea795ed
36fc0da5a553527cb1d2a9551dbb853b
b2386ffb911b14667cb8f0f91ea547a7無題のドキュメント6e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
.imglogo
{
width:100%;985485e0fbf07d8d7793a6f66622ebe3
margin:2px auto;
}
.topInfo
{
width:100%;56667d9d87f95b2b0a779f23c4992497
margin:0px auto ;
img
{
border:1px Solid
}
body
font:"宋体" 15px;
}
A:link {
COLOR: 赤; テキスト装飾: なし
}
A: 訪問済み {
COLOR: 赤; テキスト装飾: なし
}
A:hover {
COLOR: 赤;本文> 2ee6b2fa4a782333584d63357806d591 ee7959cc8dd4be16ef633321c03dac32フィードバック ee7959cc8dd4be16ef633321c03dac32 a> ee7959cc8dd4be16ef633321c03dac32終了5db79b134e9f6b82c0b36e0489ee08ed
592fe267975b46ad5981cb77d8d8fa3c73b81aedc4ac7f07bd7292f9300776db e9d4b5f349a52ad39063056e49dcaa05 にテーブルを追加できます。 body>
73a6ac4ed44ffec12cee46588e518a5e
必ずポイントを追加してください~~~~
完全なコードは次のとおりです。
2689eb8c40bc4d4ffe96db8efe197cf4
93f0f5c25f18dab9d176bd4f6de5d30e
36fc0da5a553527cb1d2a9551dbb853b
c9ccee2e6ea535a969eb3f532ad9fe89 imglogo
{
width:……
いいえ、この方法では、写真とフィードバックが間違った行を示唆しています
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>top</title> <style type="text/css"> .all { left :0px; top: 0px; height: 66px; width: 100%; } #imglogo { left :0px; top: 0px; height: 66px; width: 213px; } .all { float: left; } .navbar-fixed-top{ top:5px; position: fixed;; right: 10px; z-index: 1030; margin-bottom: 0px; } .topright{ clear: both; float:right; } </style></head><body><form id="top" runat="server"> <div class="all" > <div id="imglogo"><img alt="logo" src="images/logo.jpg" /></div> </div></form><div class="navbar-fixed-top"> <div class="topright"> <a href="#" target="_blank" >反馈建议</a> | <a href="">帮助中心</a> | <a href="#" >退出</a> </div></div><div> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p> <p> ·Photoshop打造唯美的冬季雪景婚片</p></div></body></html> それがあなたが望むものであるかどうかを確認してください
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>#top { width:100%; margin:0; padding:0;}#sitelogo { float:left; width:240px;}#top-r { float:right; width:70%; min-width:660px; height:66px;}#top-r .meta { text-align:right;}</style></head><body><div id="top"> <div id="sitelogo"> 自己塞图片 </div> <div id="top-r"> <p class="meta"><a href="#">测试</a> | <a href="#">测试</a> | <a href="#">测试</a> | <a href="#">测试</a></p> </div></div></body></html>
5 階の wxiaocong の返信からの引用: 完全なコードは次のとおりです:
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
e76007344fb0b9b4913efb7278a44793
b2386ffb911b14667cb8f0f91ea547a7無題ドキュメント6e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
……
意味が分かりません。ロゴとロゴを同じdivに表示したいのですね。右側のテキストはまだ 2 つの div に表示されていますか? 1 番目のケースの場合は、左側にロゴ、右側にテキストを配置してテーブルを div に追加できます。2 番目のケースの場合は、上記のコードで十分であり、マージンを変更することもできます。個人的には、2 番目のオプション + 表を好みます。これにより、広告欄などをロゴの右側に配置できます